CSS - background-size

概要

属性名	background-size
値	<bg-size>#
値の詳細	<bg-size> = [ <length-percentage> \| auto ]{1,2} \| cover \| contain
初期値	auto
適用可能要素	すべての要素
継承	継承しない
メディア	visual
アニメーション	可能

サポート (説明)

	CSS	IE/Edge	Firefox	Chrome	Opera	Safari
基本	CSS3	9.0	3.6(-webkit) 4.0	1.0(-webkit) 3.0	9.5(-o) 10.0	3.1(制限有) 4.1
cover contain	CSS3	9.0	3.6	3.0	10.0	4.1

説明

背景画像のサイズを指定します。

値	説明
auto	自動計算されます。
<length>	長さを指定します。
<percentage>	表示領域に対する割合で指定します。
cover	表示領域をすべて埋め尽くす大きさで表示します。
contain	表示領域に画像がすべて表示される大きさで表示します。

<length>, <percentage>, auto をひとつのみ記述した場合は、横方向に適用され、縦方向は auto になります。ふたつ記述した場合は、横方向、縦方向の順に適用されます。

CSS

background-size: 50px;       /* 横:50px、縦:auto */
background-size: 50px 50px;  /* 横:50px、縦:50px */

使用例

CSS

.test {
  width: 100px;
  height: 60px;
  border: 1px solid gray;
  background-repeat: no-repeat;
  background-image: url(../image/back.gif);
}
.test-auto {
  background-size: auto;
}
.test-length {
  background-size: 60px 40px;
}
.test-percentage {
  background-size: 50% 50%;
}
.test-cover {
  background-size: cover;
}
.test-contain {
  background-size: contain;
}

HTML

<h5>auto</h5>
<div class="test test-auto"></div>
<h5>length</h5>
<div class="test test-length"></div>
<h5>percentage</h5>
<div class="test test-percentage"></div>
<h5>cover</h5>
<div class="test test-cover"></div>
<h5>contain</h5>
<div class="test test-contain"></div>

CSS - background-size

概要

サポート (説明)

説明

使用例

auto

length

percentage

cover

contain

関連項目

リンク