CSS background-size 属性

定義と使用方法

background-size 属性は背景画像のサイズを指定します。

も参照してください：

CSS タイプ：CSS 背景、CSS 背景（高度）

HTML DOM リファレンスマニュアル：backgroundSize 属性

例

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

div
{
background:url(img_flwr.gif);
background-size:80px 60px;
background-repeat:no-repeat;
}

実際に試してみてください

CSS 语法

background-size: length|percentage|cover|contain;

属性値

値 説明 テスト
length

背景画像の高さと幅を設定します。

1番目の値は幅を設定し、2番目の値は高さを設定します。

値を1つ設定した場合、2番目の値は「auto」に設定されます。

 テスト
percentage

親要素のパーセンテージで背景画像の幅と高さを設定します。

1番目の値は幅を設定し、2番目の値は高さを設定します。

値を1つ設定した場合、2番目の値は「auto」に設定されます。

 テスト
cover

背景画像を十分に拡張して、背景画像が背景エリアを完全に覆います。

背景画像の一部は、背景位置エリアに表示されないかもしれません。

 テスト
contain 画像を最大サイズに拡張して、幅と高さが内容エリアに完全に適応するようにします。 テスト

技術的詳細

デフォルト値： auto
継承性： no
バージョン： CSS3
JavaScript 语法： object.style.backgroundSize="60px 80px"

さらに例

背景画像を伸ばします
背景画像を伸ばして、内容エリアを完全に覆います。
背景画像を伸ばして、背景画像を水平に4回コピーします
背景画像を伸ばして、背景画像が水平に4回コピーされるようにします。

ブラウザのサポート

テーブルの数字は、その属性を完全にサポートする最初のブラウザのバージョンを示しています。

Chrome Edge Firefox Safari Opera
Chrome IE / Edge Firefox Safari Opera
4.0
1.0 -webkit-		 9.0 4.0
3.6 -moz-		 4.1
3.0 -webkit-		 10.5
10.0 -o-