CSS で背景画像を使う際、今までは画像ファイルを適切な大きさにリサイズする必要がありましたが、CSS3 からは背景画像の幅・高さを拡大・縮小できるプロパティ background-sizeを使うことができます。
background-image: で背景画像を指定して、background-size:で背景画像のサイズを調整してあげます。
CSS3 なのでIE 下位バージョンでは無理かな…ということで、スマフォサイトを構築する時には結構使うプロパティです。
background-size: プロパティの利用例
こんな感じでCSS ファイルに記述します。|
1 2 3 4 5 |
#nav { background-image:url(../sample.jpg) -moz-background-size:cover; background-size:cover; } |
background-size:の値を変えて、以下に簡単なサンプルを載せました。
※背景画像ファイルのサイズは256 × 256px です。
違いが分かりやすいように、背景エリアの幅と高さは 150 × 100pxにしています。
background-size:auto
|
1 2 3 4 5 6 7 8 |
.background-size01 { background-image:url(../sample.jpg) background-repeat:no-repeat; -moz-background-size:auto; background-size:auto; width:150px; height:100px; } |
background-size:contain
|
1 2 3 4 5 6 7 8 |
.background-size02 { background-image:url(../sample.jpg) background-repeat:no-repeat; -moz-background-size:contain; background-size:contain; width:150px; height:100px; } |
background-size:cover
|
1 2 3 4 5 6 7 8 |
.background-size03 { background-image:url(../sample.jpg) background-repeat:no-repeat; -moz-background-size:cover; background-size:cover; width:150px; height:100px; } |
background-size:○px
|
1 2 3 4 5 6 7 8 |
.background-size04 { background-image:url(../sample.jpg) background-repeat:no-repeat; -moz-background-size:50px 50px; background-size:50px 50px; width:150px; height:100px; } |
background-size:○%
|
1 2 3 4 5 6 7 8 |
.background-size05 { background-image:url(../sample.jpg) background-repeat:no-repeat; -moz-background-size:50% 50%; background-size:50% 50%; width:150px; height:100px; } |
background-size: の値のまとめ
background-size:の値は以下のようになっています。| auto | 自動算出（初期値） |
|---|---|
| contain | 縦横比は保持。背景領域に収まる最大サイズに拡大縮小 |
| cover | 縦横比は保持。背景領域を完全に覆う最小サイズに拡大縮小 |
| px | pxで直接数値を指定 |
| % | %で直接数値を指定 |
コメント