ブラウザの表示サイズ合わせて自動で拡大・縮小する背景画像の設定方法

新旧スキン両対応

アメブロカスタマイズのわざめーばです。

こんにちは。

今回ご紹介するカスタマイズ方法は、ブラウザの表示サイズにフィットするように背景画像を自動的に拡大・縮小して表示するようにする方法です。

なぜ今までこんなことに気付かなかったのかと、自分が嫌になってしまうほど、実に簡単にできました。

では早速そのやり方です。

今回は、CSSではなく、フリースペースフリープラグインのどちらかを使ってください。

どちらでも構いませんが、個人的には文字数制限の緩いフリースペースの方をおススメします。

では、フリースペースフリープラグインに、以下のようにタグを記述してください。

<img src="背景にする画像のURL" style="position:fixed;z-index:-9999;top:0;left:0;min-width:100%;min-height:100%">

これだけです。

もし、背景にする画像のURLに何を設定すればいいのかわからない場合は、アメブロの画像アップロード方法とアップロード画像のURLを取得する方法を参考にしてください。

なお、この方法で表示した背景画像は、通常のCSSで設定した背景画像のように並べて表示することはできませんのでご承知おきください。

以上、ブラウザの表示サイズに自動的にフィットするように背景画像を表示する方法をご紹介しました。

よかったら試してみてくださいね。

アメブロカスタマイズで人の集まるブログ作り