CSS3 Pre-Reference



background-size

背景画像のサイズ

試す

コード

※一番上の例のみです。

#containe p {
    background-size: 3cm 20em;
    -moz-background-size: 3cm 20em;
    -webkit-background-size: 3cm 20em;
}

サンプル

書いてある描画方法で描画されていれば対応しています。背景に枠線を付けてあるので、参考にしてください。

3cm 5em(大きめの画像)

cover(大きめの画像、最大サイズ)

contain(大きめの画像、最小サイズ)

3cm 5em(小さめの画像)

cover(小さめの画像、最大サイズ)

contain(小さめの画像、最小サイズ)

コメントする


対応ブラウザ

Firefox
3.6~
Chrome/Safari
3.0~
Opera
9.5~
InternetExplorer
9

パラメータ

[[ <length> | <percentage> | auto ]{1,2} | cover | contain][,[ <length> | <percentage> | auto ]{1,2} | cover | contain]*
初期値 auto
適用 すべての要素
継承 しない
レベル 3
%の解釈 要素のサイズを参照
適用メディア Visual
参考文献 CSS Backgrounds and Borders Module Level 3#3.9. The ‘background-size’ property

解説

背景画像のサイズを指定します。

値やパーセンテージで指定する場合は、1つ目が横幅、2つ目が縦幅になります。普通と少し違うのは、値が1つだけの場合は、縦が”auto”と解釈されます。

パーセンテージは要素のサイズに対する背景画像のサイズを示します。つまり幅”50%”を指定すると、背景は2回繰り返して丁度要素の横幅にフィットするサイズになります。

もちろん、複数の背景画像にも対応しています。指定する場合は、カンマ区切りで指定します。

auto
背景画像のサイズは特に変更されません。
contain
背景画像は縦横のうち大きなほうのサイズに合わせて、”background-clip”で指定された範囲に収まるように描画されます。つまり縦か横のどちらかが範囲外にはみ出します。
cover
背景画像は縦横のうち小さなほうのサイズに合わせて、”background-clip”で指定された範囲に収まるように描画されます。つまり縦か横のどちらかが、1回以上繰り返されることになります。

Firefoxについては、1.0~3.6までは”-moz-background-size”というプロパティになっています。また、Safari/Chromeについても、”-webkit-background-size”というプロパティになっています。

トラックバック

投稿されたコメント