ブラウザのビューポートサイズに応じて、背景画像を伸縮させたい。
Stack Overflowでは、例えばStretch and scale CSS backgroundのような、この仕事をするための質問をいくつか見ました。しかし、私は画像を img
タグではなく background
を使って配置したいのです。
その中では、img
タグを配置して、CSSでimg
タグにトリビュートしています。
width:100%; height:100%;
これは動作しますが、その質問は少し古く、CSS 3では背景画像のサイズ変更はかなりうまくいくと述べています。私はこれを最初の例で試してみましたが、うまくいきませんでした。
background-image`宣言で行う良い方法はありますか?
先ほどのコードを使って...。
<div id="background">
<img src="img.jpg" class="stretch" alt="" />
</div>
#background {
width: 100%;
height: 100%;
position: fixed;
left: 0px;
top: 0px;
z-index: -1; /* Ensure div tag stays behind content; -999 might work, too. */
}
.stretch {
width:100%;
height:100%;
}
これで、コンテンツのみがスクロールし、背景はスクロールしないという望ましい効果が得られます。
背景画像は、どんな画面サイズでもブラウザのビューポートに合わせてリサイズされます。コンテンツがブラウザのビューポートに収まらず、ユーザーがページをスクロールする必要がある場合、コンテンツがスクロールする間、背景画像はビューポートに固定されます。
CSS 3を使えば、もっと簡単になりそうですね。
1枚の画像で実現したいですか?実は、2枚の画像を使っても、引き伸ばした背景に近いものを作ることができるのです。例えば、PNGのような画像です。
私も以前やったことがありますが、それほど難しいことではありません。それに、引き伸ばしは背景の質を落とすだけだと思います。また、巨大な画像を追加すると、遅いコンピュータやブラウザが遅くなってしまいます。