ヒーローヘッダーの背景画像を固定する

本サイトのトップページもそうですが、私が管理している別のサイトでは、トップページにヒーローヘッダーを表示しています。ヒーローヘッダーとは、背景の大きい画像にテキストを重ねた形のヘッダーです。

本サイトのトップページは、スクロールすると背景画像は動かずに、ヘッダーテキストや以降のコンテンツが背景画像の上をスクロールしていきます。これはTwenty Twentyの外観のカスタマイズで設定しています。別サイトの方は独自テーマを使っており、テーマのカスタマイズで背景画像を固定することができないので、別の方法で固定してスクロールしないようにしてみました。

方法は非常に簡単で、CSSファイルで下記のように”background-attachment”に”fixed”を指定するだけで済みました。

/* トップページの背景画像を固定する */
.wp-block-cover {
    background-attachment: fixed;
}

これだけでスクロール時に背景画像が固定されて、その上をヘッダーのテキストや以降のコンテンツがスクロールして行きます。

簡単ですが、ワンランク上のページになったような気がします！

ちなみに、この下にカバーブロックを配置して、CSSファイルに上記のコードを追加するとこんな感じになります。

はい、画像はスクロールしませんが、この位置では何か変な感じですね。

今回はスクロール時にヒーローヘッダーの背景画像を固定する方法の備忘録でした。短めでしたが最後までお読みいただきありがとうございました。