[CSS]サイズが不明なボックスいっぱいに背景画像を表示するスタイルシート

一枚の画像で、サイズ指定があるものやないものなど異なるサイズのボックスいっぱいに背景を表示するスタイルシートを紹介します。

デモのキャプチャ

CSS3 Background Images - 100% width/height of container
デモ

上記三つのデモは上から順に、

  • widthとheightの指定あり
  • width指定ありheight指定なし
  • widthとheightの指定なし

となっており、同じ背景画像を使用してボックスいっぱいに表示しています。
背景には下記の画像を使用されています。

背景画像

背景画像(※縮小しています)

三つのデモは同じスタイルシートが適用されており、CSS3のbackground-sizeが使用されています。

CSS

対応ブラウザはCSS3を使用しているため、Firefox, Chrome, Safari, Operaです。
IEなどの非対応ブラウザでは実寸大に背景が表示されます。

また、このスタイルシートの応用として、bodyに画像を適用したものもあります。

サイトのキャプチャ

Background Image v2

top of page

©2018 coliss