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

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

2015-06-25

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

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

レスポンシブデザインが増えるにつれ使用頻度の多くなった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

今月キャンペーン特典があるサービス

  • エックスサーバー
    利用料最大50%キャッシュバッグ月額495円&ドメイン永久無料 - 2024年4月3日(水)12:00まで
  • ConoHa WING
    WINGパック36ヶ月で月額643円 55%OFF ドメイン2個無料 - 2024年4月5日(金)16:00まで
  • カラフルボックス
    ドメイン永久無料特典とBOX2以上の月額費用が50%OFFのクーポンコード「SERVER50

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