背景画像のサイズを指定する
background-sizeプロパティにて、背景画像のサイズを指定することができます。
試しに下記の画像を背景画像として指定してみます。
指定の仕方としては、
- pxや%、autoでのサイズ指定
- contain 縦横比は保持し背景画像の全体を表示する
- cover 縦横比は保持し背景画像1枚だけで全体を覆う
の大きく分けて3通りの方法があります。
pxで指定
.bgimg1 {
background-image: url("sakuraimg.jpg");
color:#FFF;
-moz-background-size:100px 100px;
background-size:100px 100px;
height:300px;
}
この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。
containで指定
.bgimg2 {
background-image: url("sakuraimg.jpg");
-moz-background-size:contain;
background-size:contain;
height:300px;
}
この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。
coverで指定
.bgimg3 {
background-image: url("sakuraimg.jpg");
color:#FFF;
-moz-background-size:cover;
background-size:cover;
height:300px;
}
この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。
※なお、background-sizeプロパティはIE8以下では非対応です。
