background-image プロパティ
background-image プロパティは、エレメントの背景に画像を指定するプロパティです。
設定できる画像は1つ、または複数設定できます。
背景の範囲は、borderやpaddingの領域も含めた領域になります。
background-image: url('img/example_image.jpg');
デフォルトでは画像は繰り返し表示されます。繰り返し表示を止めるには background-repeat: no-repeat; と指定します。
ページ内 Index
構文(Syntax)
指定できる値は例えば、url('URL') などの <image> タイプです。
CSS
background-image: none | <image>;
DOM ( JavaScript )
String=object.style.backgroundImage
object.style.backgroundImage="<image>"
値(Values)
備考(Remarks)
| 初期値(Default value) | none |
| 継承(Inherited) | no |
| 変化(Animatable) | no |
Example
background-imageの表示例です。urlで指定された画像ファイルを読み込みます。
一つの画像が繰り返し表示されます。
関連 CSS
以下は関連する CSS です。
| プロパティ名 | 概要 |
|---|---|
| background | バックグランドプロパティの一括指定 |
| background-attachment | スクロールによるバックグランドの表示位置 |
| background-blend-mode | 複数の背景画像や配色を混ぜ合わせる |
| background-clip | border、paddingを領域に含めるか |
| background-color | CSSのColorの指定 |
| background-image | 画像の挿入 |
| background-origin | 繰り返し表示を開始する位置 |
| background-position | 画像の配置位置 |
| background-repeat | 画像の繰り返し(デフォルトは繰り返し) |
| background-size | 画像のサイズ |
| linear-gradient() | 線形グラデーション |
| radial-gradient() | 円形グラデーション |
