[CSS3 を使ってみる：第七回] 背景画像の大きさを設定する(background-size)

background-size を指定すると、背景画像の大きさを設定できる。

◆background-size のプロパティ

background-size: 幅, 高さ;
※幅・高さともに px 指定もしくは % 指定で記述するが、% 指定の場合、設定する背景画像が入るボックスに対しての比率となる。

今回使用する背景画像は以下。幅 100px 高さ 100px。


以下は div (id: backgroundSize、width: 200px、height: 100px) に背景画像を 幅 100px、高さ 50px の指定を加えた場合。

#backgroundSize {
  background-size: 100px 50px;
  -webkit-background-size: 100px 50px; /* Safari、Chrome で有効 */
  -moz-background-size: 100px 50px; /* Firefox で有効 */
}

背景画像の大きさが指定通りに縮小されている。なお、正規表現である background-size は現在のところ、どのブラウザでも認識されなかったが、-webkit- や -moz- を付ければ Safari、Chrome、Firefox では認識できた。Opera は -o- を付けてもダメだった。


今度は % 指定にしてみる。以下は div (id: backgroundSize、width: 200px、height: 100px) に背景画像を 幅 100%、高さ 50% の指定を加えた場合。

#backgroundSize {
  background-size: 100% 50%;
  -webkit-background-size: 100% 50%; /* Safari、Chrome で有効 */
  -moz-background-size: 100% 50%; /* Firefox で有効 */
}

今回は背景画像を含む div の大きさである 100px X 100% = 幅が 100px、200px X 50% = 高さが 100px になる。


最後に、幅の指定だけにしてみる。以下は div (id: backgroundSize、width: 200px、height: 100px) に背景画像を 幅 50px の指定を加えた場合。

#backgroundSize {
  background-size: 50px;
  -webkit-background-size: 50px; /* Safari、Chrome で有効 */
  -moz-background-size: 50px; /* Firefox で有効 */
}

背景画像が幅・高さともに 100px なので、半分の大きさになる。


確認環境：
Safari 5.0、Firefox 3.6.3、Chrome 5.0.375.70

正常に動作しなかった環境：
Opera 10.53

W3C：
CSS Color Module Level 3