background-sizeの使い方

background-sizeで設定できる値について調べてみました。

対応ブラウザ

background-sizeの対応ブラウザはこちら
Android4.3以下ではbackgroundのショートハンドに対応していないので、注意が必要です。

サンプルコード

px指定、%指定、cover、containをそれぞれ試してみました。

HTML

<p>ピクセル指定 (background-size: 80px; と background-size: 80px 40px;)</p>
<div class="box bgs_80"></div>
<div class="box bgs_80-40"></div>

<p>パーセント指定 (background-size: 90%; と background-size: 90% 90%;)</p>
<div class="box bgs_90per"></div>
<div class="box bgs_90per-90per"></div>

<p>cover</p>
<div class="box cover"></div>

<p>contain</p>
<div class="box contain"></div>

CSS

.box {
	float: left;
	margin-right: 20px;
	width: 100px;
	height: 200px;
	border: red 2px solid;
	background: url(image.jpg) center center no-repeat;
}
.bgs_80 {
	background-size: 80px;
}
.bgs_80-40 {
	background-size: 80px 40px; 
}
.bgs_90per {
	background-size: 90%;
}
.bgs_90per-90per {
	background-size: 90% 90%;
}
.cover {
	background-size: cover;
}
.contain {
	background-size: contain;
}

値が1つの場合は画像の幅で、高さはautoになります。
値が2つの場合はそれぞれ画像の幅と高さになります。
background-sizeのデモページ

cover 背景領域を覆う最小サイズになる。
contain 背景領域に収まる最大サイズになる。

 

【参考サイト】

 

このエントリーをはてなブックマークに追加

関連記事

コメントを残す

メールアドレスが公開されることはありません。
* が付いている欄は必須項目です

CAPTCHA


コメントが承認されるまで時間がかかります。

2024年3月
 12
3456789
10111213141516
17181920212223
24252627282930
31