[kodawari555]

Snow Monkey:バージョン: 12.2.2
Snow Monkey Blocks:バージョン 10.2.1
【お使いのブラウザ】 Chrome

固定ページのヘッダー画像を、スクロールしても動かないように固定したいです。

background-attachment: fixed;

を指定しても固定できなかったですが、

.c-page-header__bgimage>img {
  position: fixed;
}

とすることで、固定することはできました。

動作としてはこれで良いのですが、なぜかヘッダー画像が大きく拡大されてしまいます。
もとの大きさで、固定する方法はありますでしょうか？？

わかる方、ご教示頂けますと助かります。
よろしくお願い致します。

### 試したこと

.c-page-header__bgimage>img {
  position: fixed;
}

♥ 0

いいねをした人: 居ません

[キタジマ タカシ]

なぜかヘッダー画像が大きく拡大されてしまいます。

これは画像の左右は拡大されないけど、上下についてはコンテンツまで突き抜けて表示されてしまう、ということであっていますか？

そうだとして、position: fixed するとその要素は親子の関係から独立してしまうので、親要素の高さや overflow: hidden を無視して表示される形になります。そのため画像がコンテンツまで突き抜けるという表示になります。

で考えてみたんですけど、んーこれ結構難しい問題ですね^^; position: fixed せずに js でスクロールの度に top を設定してやれば擬似的に固定されたようには見えると思うんですけどわざわざそのために js 使うのもなぁっていう…。CSS でやるなら HTML の構造を変えないとどうしようもできないのではという感じですが、ちょっと考えてみます。

♥ 1

いいねをした人: 居ません

[kodawari555]

ご返信ありがとうございます！

これは画像の左右は拡大されないけど、上下についてはコンテンツまで突き抜けて表示されてしまう、ということであっていますか？

はい、よくみたら、画像サイズだけの問題ではなかったです。
コンテンツ突き抜けてました。

単純に自分のCSSの知識不足で、簡単に実装できる？と思っていたのですが、そうでもないのですね！それがわかっただけでも、とりあえずこの変更は保留にしようと思います。

もし実装できましたらすごくありがたいので、お手すきのときで良いので、よろしくお願い致します。

♥ 0

いいねをした人: 居ません

[キタジマ タカシ]

おそくなりすみません！ Snow Monkey v13 以降で、下記の CSS を追加することでそれなりに実現できます。あくまでそれなりになので、環境によってちょっと調整が必要かなと思います。

.c-page-header__bgimage {
    position: fixed;
}

.l-contents__body {
    position: relative;
    background-color: #fff;
}

.l-footer {
    position: relative;
    background-color: #fff;
}

良かったら試してみてください！

♥ 0

いいねをした人: 居ません

[kodawari555]

 

こちら、実装いただきありいがとうござます！

アイキャッチ固定で表示することができました。

♥ 1

いいねをした人: 居ません

[投稿者]

投稿