WEB Tips デザイン・コーディング

background-size の使い方&サンプル

2015-06-25

本記事にはプロモーションが含まれています。

background-size の使い方&サンプル

ソラミ♪

Webエンジニアをやりつつ、デザインにも携わる株式会社コムワークの中の人。WordPress、Adobeアプリ、カワウソ好き。 2015年から当ブログ運営|2008年からGmail使用中|WordPress制作10年以上|15社以上のレンタルサーバー利用経験|100件以上のドメイン取得運用|サイト・ドメイン移転多数 »  もっとくわしく

レスポンシブデザインが増えるにつれ使用頻度の多くなったbackground-sizeプロパティ。
背景画像をレスポンシブ対応するときに活躍します。

元の画像

dummy360240

width 360px / height 240pxの写真を参考に。
縦横のサイズが違う方が、分かりやすいので。

background-size のIE対応

background-sizeプロパティはIE9以降対応です。IE8は未対応。そのほかのブラウザ対応状況は以下の通りです。

background-sizeの値

auto(初期値)
background-sizeを指定しない場合などは、画像の縦横の値を算出する

長さ(数値)
pxなどで指定する。横幅の値だけの指定も可能。

パーセント(%)
背景領域に対する背景画像の割合

cover :
背景領域を最小サイズで覆い尽くす(縦横比は保持)

contain:
背景領域を最大サイズで覆い尽くす(縦横比は保持)

background-sizeの実装例

htmlは以下の通り。

<div class="photo" id="demo1"></div>

200px x 200pxのdivに背景画像を設定します。CSSは以下のように設定します。

.photo{
	margin:0 0 30px;
	padding:0;
	width:200px;
	height:200px;
	border:01px solid #333;
	background-image:url(images/dummy360240.jpg);
	background-position:left top;
	background-repeat: no-repeat;
}

background-size:auto(初期値)

#demo1{
	bacground-size:auto;
}

DEMO

Backgroundプロパティ1

背景画像のサイズは実サイズの横360px、縦240pxなので、200px四方のボックスは覆いかくされる。左上が基点。

background-sizeを数値で指定する

#demo2{
	background-size:100px 100px;
}
#demo2-2{
	background-size:100px;
}

縦横指定した場合(#demo2)は縦横比は無視される。

Backgroundプロパティ5

横だけを指定した場合(#demo2-2)は、background-size:100px auto;と同じ意味になる。縦横比は保持される。

Backgroundプロパティ2

background-sizeを%で指定する

#demo3{
	background-size:50% 50%;
}
#demo3-2{
	background-size:50%;
}

この場合も値を指定したときと同じような結果に。サンプルが悪かったか!?

縦横指定した場合(#demo3)は縦横比は無視されます。背景領域w200px,h200pxの縦横50%ということになります。

Backgroundプロパティ5

background-size:cover

#demo4{
	background-size:cover;
}

背景画像の最小サイズ、この写真の場合は高さを背景領域の高さいっぱい迄拡大する、高さよりサイズの大きい横幅は切り取られます。
Backgroundプロパティ3

background-size:cover;の使いどころ。
ページ全体の背景画像や、トップページのヒーロー画像など大きな写真を使用する場合は、background-size: cover; を使うと背景画像を拡大縮小してコンテナー全体に表示することができます。

background-size:contain

#demo5{
	background-size:contain;
}

背景画像の最大サイズを背景領域いっぱいに拡大します。この場合は横幅をボックスの横いっぱいになります。

縦横比は保持されるので横幅よりサイズが小さい高さは同じ比率で拡大されただけなので、下に余白ができます。

Backgroundプロパティ4

background-size:contain;の使いどころ。
アイコンなどを背景画像として表示する場合、background-size: contain; が適切で、コンテナ全体に背景画像が表示されるようできます。

background-sizeプロパティのDEMO

参考:★CSS3リファレンス
http://www.htmq.com/css3/background-size.shtml

  • この記事を書いた人
  • 最新記事

ソラミ♪

Webエンジニアをやりつつ、デザインにも携わる株式会社コムワークの中の人。WordPress、Adobeアプリ、カワウソ好き。 2015年から当ブログ運営|2008年からGmail使用中|WordPress制作10年以上|15社以上のレンタルサーバー利用経験|100件以上のドメイン取得運用|サイト・ドメイン移転多数 »  もっとくわしく

-WEB Tips, デザイン・コーディング
-