[CSS]サイズが不明なボックスいっぱいに背景画像を表示するスタイルシート
Post on:2010年7月30日
sponsors
一枚の画像で、サイズ指定があるものやないものなど異なるサイズのボックスいっぱいに背景を表示するスタイルシートを紹介します。
CSS3 Background Images - 100% width/height of container
デモ
上記三つのデモは上から順に、
- widthとheightの指定あり
- width指定ありheight指定なし
- widthとheightの指定なし
となっており、同じ背景画像を使用してボックスいっぱいに表示しています。
背景には下記の画像を使用されています。
背景画像（※縮小しています）
三つのデモは同じスタイルシートが適用されており、CSS3のbackground-sizeが使用されています。
CSS
|
1 2 3 4 5 6 7 8 9 10 11 |
<textarea name="code" class="css" cols="60" rows="5"> .back { background-image: url(back.jpg); background-repeat:no-repeat; background-position:center center; -o-background-size: 100% 100%, auto; -moz-background-size: 100% 100%, auto; -webkit-background-size: 100% 100%, auto; background-size: 100% 100%, auto; } </textarea> |
対応ブラウザはCSS3を使用しているため、Firefox, Chrome, Safari, Operaです。
IEなどの非対応ブラウザでは実寸大に背景が表示されます。
また、このスタイルシートの応用として、bodyに画像を適用したものもあります。
sponsors
