制作のご相談はこちら
CSS3 スマホサイトで活用したい!background-sizeについて

2014年10月31日

CSS3 スマホサイトで活用したい!background-sizeについて

スマートフォンサイト制作の際、Ratinaディスプレイの登場で解像度を2倍にした画像を使うのが一般的となっています。
imgタグではwidthとheight属性に画面上に表示する大きさを指定し、cssではwidthをパーセント指定すれば画質を低下させずに表示することが可能です。

今回は背景画像として表示させたい場合のbackground-sizeの使い方を説明します。

今回のサンプルはこちらです。
今日はハロウィンなのでキャンディのイラストを背景画像にしてみました。

background-sizeとは

background-sizeとは背景画像のサイズを指定するCSSプロパティです。
background-imageまたはbackgroundプロパティと一緒に指定しなければなりません。

構文

background-size: 画像の幅 画像の高さ;

background-sizeの値

/*構文例*/
background-size: 24px; 

/*画像の高さを省略した場合は、自動的にautoと解釈される*/
background-size: 24px auto;
background-size: 50% 50%;
background-size: 100% 100%;
 
/*もし画像の原寸幅が200pxで半分のサイズで表示させたい場合*/
.sample {
    background-image: url("sample.png");
    background-size: 100px;
}

長さやパーセンテージで指定する場合、値を2つ記述すると、それぞれ記述した順に幅と高さを表します。
1つだけ指定した場合には、もう1つはautoと解釈されます。また、負の値を指定することはできません。

横幅と高さ共に100%の指定の場合、ブラウザの縦横にピッタリくっついて表示されるので、画像の比率は維持されません。
画像の比率を維持する場合は次に記す”cover”または”contain”を指定します。

background-size: cover;

.sample {
    background-image: url("sample.png");
    background-size:cover;
}

縦横の比率は保持して、背景領域を完全に覆う最小サイズになるように背景画像を拡大縮小されます。
表示領域が変更された場合でも、画像の中心が画面の中央に表示されます。
例えば、人の顔や商品など見せたいエリアを画像の中央に持って来ればPCでもスマホでもアピールしたいエリアが表示されるということです。

background-size: contain;

.sample {
    background-image: url("sample.png");
    background-size:contain;
}

縦横の比率は保持して、背景領域に収まる最大サイズになるように背景画像を拡大縮小されます。
coverとの違いは表示領域が変更された場合でも、画像が全て表示されるというのが大きな違いです。

こちらのサイトを参考にさせて頂きました。

CSS3 スマホサイト制作にかかせないbackground-sizeについて