CSS背景画像プロパティ

❮前へ完全なCSSリファレンス次へ❯

例

<body>要素の背景画像を設定します。

body {
background-image: url("paper.gif");
background-color: #cccccc;
}

例

<body>要素に2つの背景画像を設定します。

body {
background-image: url("img_tree.gif"), url("paper.gif");
background-color: #cccccc;
}

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

定義と使用法

プロパティは、要素のbackground-image1つ以上の背景画像を設定します。

デフォルトでは、背景画像は要素の左上隅に配置され、垂直方向と水平方向の両方で繰り返されます。

ヒント：要素の背景は、パディングと境界線を含む要素の合計サイズです（マージンは含まれません）。

ヒント：画像が利用できない場合に使用する背景色を常に設定してください。

デフォルト値：	なし
遺伝性の：	いいえ
アニメート可能：	番号。アニメート可能について読む
バージョン：	CSS1 + CSS3の新しい値
JavaScript構文：	オブジェクト.style.backgroundImage = "url（img_tree.gif）"

ブラウザのサポート

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

Property
background-image	1.0	4.0	1.0	1.0	3.5

注： IE8以前は、複数の背景画像をサポートしていません。

CSS構文

background-image: url|none|initial|inherit;

プロパティ値

Value	Description
url('URL')	The URL to the image. To specify more than one image, separate the URLs with a comma
none	No background image will be displayed. This is default
conic-gradient()	Sets a conic gradient as the background image. Define at least two colors
linear-gradient()	Sets a linear gradient as the background image. Define at least two colors (top to bottom)
radial-gradient()	Sets a radial gradient as the background image. Define at least two colors (center to edges)
repeating-conic-gradient()	Repeats a conic gradient
repeating-linear-gradient()	Repeats a linear gradient
repeating-radial-gradient()	Repeats a radial gradient
initial	Sets this property to its default value. Read about initial
inherit	Inherits this property from its parent element. Read about inherit

その他の例

例

<body>要素に2つの背景画像を設定します。最初の画像を1回だけ表示し（繰り返しなし）、2番目の画像を繰り返します。

body {
background-image: url("img_tree.gif"), url("paper.gif");
background-repeat: no-repeat, repeat;
background-color: #cccccc;
}

例

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

.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 */
}

例

<div>要素の背景画像として線形グラデーション（2色）を設定します。

#grad1 {
height: 200px;
background-color: #cccccc;
background-image: linear-gradient(red, yellow);
}

例

<div>要素の背景画像として線形グラデーション（3色）を設定します。

#grad1 {
height: 200px;
background-color: #cccccc;
background-image: linear-gradient(red, yellow, green);
}

例

repeating-linear-gradient（）関数は、線形グラデーションを繰り返すために使用されます。

#grad1 {
height: 200px;
background-color: #cccccc;
background-image: repeating-linear-gradient(red, yellow 10%, green 20%);
}

例

<div>要素の背景画像として放射状グラデーション（2色）を設定します。

#grad1 {
  height: 200px;
  background-color: #cccccc;
  background-image: radial-gradient(red, yellow);
}

例

<div>要素の背景画像として放射状グラデーション（3色）を設定します。

#grad1 {
height: 200px;
background-color: #cccccc;
background-image: radial-gradient(red, yellow, green);
}

例

repeat-radial-gradient（）関数は、放射状グラデーションを繰り返すために使用されます。

#grad1 {
height: 200px;
background-color: #cccccc;
background-image: repeating-radial-gradient(red, yellow 10%, green 20%);
}

CSSリファレンス

CSS Properties