CSS - background-size

トップ > CSSリファレンス > background-size

概要

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

サポート (説明)

CSSIE/EdgeFirefoxChromeOperaSafari
基本CSS39.03.6(-webkit)
4.0
1.0(-webkit)
3.0
9.5(-o)
10.0
3.1(制限有)
4.1
cover
contain
CSS39.03.63.010.04.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>
表示
auto
length
percentage
cover
contain

関連項目

background, background-color, background-image, background-repeat, background-attachment, background-position, background-clip, background-origin, background-size

リンク


Copyright (C) 1997-2015 杜甫々
初版:1997年7月27日、最終更新:2015年11月29日
http://www.tohoho-web.com/css/prop/background-size.htm