background-size:背景画像を表示する大きさ(サイズ)を指定する
初期値 | auto auto |
適用対象 | 全ての要素、::first-letter および::first-line |
継承 | しない |
アニメーション | <length>値、<percentage>値、calc(); |
対応ブラウザ | caniuseで確認 |
background-sizeプロパティの説明
background-size
は、背景画像を表示する大きさ(サイズ)を指定します。元の画像サイズに関わらず、画面に表示させる大きさを数値で指定したり、背景画像の配置可能範囲に合わせてサイズを自動調整することができます。
background-sizeに指定できる値
- auto
- 縦横比を維持したまま画像を元のサイズで表示します。水平または垂直方向のどちらか一方のサイズが指定されている場合は、縦横比を維持した状態で伸縮します。
- contain
- 画像の縦横比を崩すことなく、表示可能な範囲を埋めようとします。要素の大きさが元の画像よりも小さい場合は縮小し、大きい場合はタイル状に繰り返し配置します。要素のサイズが画像よりも大きく、
background-repeat
の値にno-repeat
が指定されている場合は、長い方の辺が端に達するまで拡大します。 - cover
- 必用に応じて画像を引き伸ばし、表示可能な範囲を埋めようとします。要素と画像の縦横比が異なる場合は、空白が残らないように配置してから、はみ出した部分を切り取ります。つまり、短い方の辺を最大化させて長い方の辺をトリミングし、全体を背景画像で覆います。
- <length>
- 長さを表すデータ型の値で指定します。CSSで使える単位と数値の組み合わせが使用できます。ただし、負の値は指定できません。一つの値を指定した場合は水平軸の幅が決まり、高さが
auto
となります。二つの値を指定した場合は、縦横比を無視して幅と高さが決まります。 - <percentage>
- 割合を表すデータ型の値で指定します。背景画像の配置可能な範囲に対するパーセンテージを表します。ただし、負の値は指定できません。配置可能な範囲の基準は、
background-origin
で定義します。background-attachment
の値がfixed
の場合、その基準はビューポート全体とみなされます。
background-sizeの使い方とサンプル
background-size
プロパティの構文は以下の通りです。
CSS
/* キーワード値 */
background-size: auto;
background-size: contain;
background-size: cover;
/* 幅指定、高さ自動調整 */
background-size: 10px;
background-size: 1rem;
background-size: 100vw;
background-size: 25%;
/* 幅指定、高さ指定 */
background-size: 50% auto;
background-size: 3rem 30%;
background-size: auto 60px;
background-size: auto auto;
/* 複数の背景画像に対する指定 */
background-size: auto, auto;
background-size: 10px 10px, 25%, 25%;
background-size: cover, contain, auto;
/* グローバル値 */
background-size: inherit;
background-size: initial;
background-size: revert;
background-size: unset;
background-sizeの実例
それでは簡単なサンプルを見てみましょう。要素に対してオーバーサイズの横長の背景画像を用意し、background-size
の値だけを変更すると以下のように表示されます。背景画像が表示可能範囲よりも
小さくなった場合は背景色が表示されます。
表示確認
CSS
.samp_box {
padding: 1rem;
text-align: center;
}
.samp_box > div {
width: 200px;
height: 150px;
margin: 1rem auto 0 auto;
border: 1px solid #039;
background: url(../images/sample_photo_628x370.png) #09f no-repeat;
color: #fff;
font-size: 2rem;
}
#item_1 {
background-size: auto;
}
#item_2 {
background-size: contain;
}
#item_3 {
background-size: cover;
}
#item_4 {
background-size: 50% auto;
}
HTML
<div class="samp_box">
<p>background-size</p>
<div id="item_1">auto</div>
<div id="item_2">contain</div>
<div id="item_3">cover</div>
<div id="item_4">50% auto</div>
</div>
background-sizeに関連するCSSプロパティ
背景(バックグラウンド) | |
---|---|
background | 背景に関する指定をまとめて行う |
background-attachment | 背景画像の固定・移動を指定する |
background-blend-mode | 背景色や背景画像の描画モードを指定する |
background-clip | 背景の描画範囲を指定する |
background-color | 背景色を指定する |
background-image | 背景画像やグラデーションを指定する |
background-origin | 背景画像を配置する基準点を指定する |
background-position | 背景画像の表示開始位置を指定する |
background-repeat | 背景画像の繰り返しを指定する |
background-size | 背景画像を表示するサイズ(大きさ)を指定する |
backdrop-filter | 要素の背後領域にぼかしや色変化などのフィルタ効果を与える |