ブログの背景画像を全画面で表示する方法

Imaginaryの通常の背景画像はおよそブログのヘッダーのみに表示されるように高さが指定されています。

背景画像の高さはBloggerの管理画面のテーマのカスタマイズの詳細設定の背景から一定の範囲内で調節することができます。

ブログの背景全体を覆い尽くすデザイン

もう一つの背景画像の表示の仕方としてデバイスの全画面を対象にする、いい換えるとブログの背景全体を覆い尽くす方法について紹介します。

Imaginaryのソースコードを書き換える

Bloggerの管理画面のテーマのメニュー（カスタマイズの右横のボタンから開く）の「HTMLを編集」、または「バックアップ」と「元に戻す」でテンプレートのXMLファイルを書き換えるかのどちらかで行います。

Imaginaryのソースコードのskin内のCSSを編集します。

書き換え前のCSS

.bg-image-container {width:min(100vw, $(sidebar.width + content.width + content.margin));height:$(body.background.height);position:absolute;overflow:hidden;z-index:-1;contain:strict}

※テンプレートの古いファイルは異なりますので、新しいものをダウンロードして使って下さい。

書き換え後のCSS

.bg-image-container {width:min(100vw, $(sidebar.width + content.width + content.margin));height:100lvh;position:fixed;top:0;overflow:hidden;z-index:-1;contain:strict}

※太字が変更する箇所です。

skin内の説明文の「ヘッダーの背景画像」のところの「bg-image-container」のclassの縦幅のheight:$(body.background.height)を画面の最大の高さの100vh、positionの値を位置の固定のfixedに変更します。そして画面の上端から表示するためにtop:0を追加します。

Imaginaryで全画面の背景画像を取り入れるとブログの背景色が付いてないヘッダーとフッターとインデックスページの複数のスニペットの隙間やパソコンではメインカラムとサイドバーの隙間に背景画像が見えることになります。

背景画像を親ボックスから固定するために管理画面のテーマのカスタマイズの背景の配置の「ページとともにスクロール」のボタンは停止します（普通に背景画像を固定すると処理が重いのか、ブラウザのスクロールが悪くなることが確認されたので、親ボックスから固定する方法を取ります）。

画面に固定して一つの背景画像を表示しますので、なるべく縦長の画像をアップロードして使用すると表示領域に合い易いです。