CSSのbackground-sizeプロパティ

例

背景画像のサイズを「自動」でピクセル単位で指定します。

#example1 {
background: url(mountain.jpg);
background-repeat: no-repeat;
background-size: auto;
}

#example2 {
background: url(mountain.jpg);
background-repeat: no-repeat;
background-size: 300px 100px;
}

以下の「自分で試してみてください」の例をもっと見てください。

定義と使用法

このbackground-sizeプロパティは、背景画像のサイズを指定します。

このプロパティで使用できる構文は4つあります。キーワード構文（ "auto"、 "cover"、 "contain"）、1値構文（画像の幅を設定します（高さは "auto"になります）、 2つの値の構文（最初の値：画像の幅、2番目の値：高さ）、および複数の背景の構文（コンマで区切る）。

デフォルト値：	自動
遺伝性の：	いいえ
アニメート可能：	はい。アニメート可能について読む
バージョン：	CSS3
JavaScript構文：	object .style.backgroundSize = "60px 120px"

ブラウザのサポート

表の数字は、プロパティを完全にサポートする最初のブラウザバージョンを示しています。

数字の後に-webkit-、-moz-、または-o-が続く場合は、プレフィックスを使用して機能した最初のバージョンを指定します。

Property
background-size	4.0 1.0 -webkit-	9.0	4.0 3.6 -moz-	4.1 3.0 -webkit-	10.5 10.0 -o-

CSS構文

プロパティ値

Value	Description	Play it
auto	Default value. The background image is displayed in its original size
length	Sets the width and height of the background image. The first value sets the width, the second value sets the height. If only one value is given, the second is set to "auto". Read about length units
percentage	Sets the width and height of the background image in percent of the parent element. The first value sets the width, the second value sets the height. If only one value is given, the second is set to "auto"
cover	Resize the background image to cover the entire container, even if it has to stretch the image or cut a little bit off one of the edges
contain	Resize the background image to make sure the image is fully visible
initial	Sets this property to its default value. Read about initial
inherit	Inherits this property from its parent element. Read about inherit

その他の例

例

背景画像のサイズをパーセントで指定します。

#example1 {
background: url(mountain.jpg);
  background-repeat: no-repeat;
  background-size: 100% 100%;
}

#example2 {
  background: url(mountain.jpg);
  background-repeat: no-repeat;
  background-size: 75% 50%;
}

例

「カバー」で背景画像のサイズを指定します。

#example1 {
background: url(mountain.jpg);
background-repeat: no-repeat;
background-size: cover;
}

例

「含む」で背景画像のサイズを指定します。

#example1 {
background: url(mountain.jpg);
background-repeat: no-repeat;
background-size: contain;
}

例

ここに2つの背景画像があります。最初の背景画像のサイズを「contain」で指定し、2番目の背景画像のサイズを「cover」で指定します。

#example1 {
background: url(img_tree.gif), url(mountain.jpg);
background-repeat: no-repeat;
background-size: contain, cover;
}

例

さまざまな背景プロパティを使用して、「ヒーロー」画像を作成します。

.hero-image {
background-image: url("photographer.jpg"); /* The image used */
background-color: #cccccc; /* Used if the image is unavailable */
height: 500px; /* You must set a specified height */
background-position: center; /* Center the image */
background-repeat: no-repeat; /* Do not repeat the image */
background-size: cover; /* Resize the background image to cover the entire container */
}

CSSリファレンス

CSS Properties