background-imageプロパティ
background-imageプロパティは要素の背景画像を設定します。デフォルトでは、画像はそのコピーでブロック全体を敷き詰めますが、この動作はbackground-repeatプロパティで解除できます。
構文
セレクタ {
background-image: url(画像へのパス);
}
セレクタ {
background-image: none;
}
値
| 値 | 説明 |
|---|---|
url |
画像ファイルへのパス。画像名はダブルクォート、シングルクォートで囲んでも、囲まなくても構いません。 |
none |
要素の背景画像を解除します。 |
デフォルト値: none。
例
background-imageで背景画像を設定し、background-repeatプロパティで繰り返しを禁止します:
<div id="elem"></div>
#elem {
background-image: url("bg.png");
background-repeat: no-repeat;
width: 400px;
height: 300px;
border: 3px solid black;
}
:
例
background-repeatがない場合、背景画像はブロック全体を敷き詰めます:
<div id="elem"></div>
#elem {
background-image: url("bg.png");
width: 400px;
height: 300px;
border: 3px solid black;
}
:
例
background-colorを使って背景画像と背景色を同時に設定できます。この場合、背景画像がない部分には背景色が表示されます:
<div id="elem"></div>
#elem {
background-color: orange;
background-image: url("bg.png");
background-repeat: no-repeat;
width: 400px;
height: 300px;
border: 3px solid black;
}
:
関連項目
-
背景に関する一括指定プロパティである
backgroundプロパティ
