背景画像のサイズを指定する

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以下では非対応です。

コメントを投稿する

SPONSORED LINK

CATEGORY

RECOMMEND BOOKS

OTHER

あわせて読みたい

トップへ戻る