| 属性名 | background-size |
|---|---|
| 値 | <size>[, <size>]* |
| 値の詳細 | <size> = [ auto | <length> | <percentage> ]{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 になります。ふたつ記述した場合は、横方向、縦方向の順に適用されます。
background-size: 50px; /* 横:50px、縦:auto */ background-size: 50px 50px; /* 横:50px、縦:50px */
.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;
}
<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>