CSS background-image | CSS プロパティ値| 意味使い方実例

ページコンテンツ

`background-image` CSS プロパティとは

トピック：要素の1つ以上の背景画像を設定することができるデフォルトでは、背景画像は要素の左上隅に配置され、縦横両方向に繰り返する

body {
   background-image: url("../webref.jpg");
   background-color: #cccccc;
}

デフォルト値・初期値 :	`none`
適用対象 :	全要素。 `::first-letter` and `::first-line` にも適用されます。
継承 :	不可
メディア :	visual
計算値 :	`url` 値は絶対値
アニメーションの種類 :	個別
正規順序 :	形式文法で定義される一意のあいまいでない順序
CSSの構文	`background-image: url \|none \|initial \|inherit;`

値	説明
`url("../webref.jpg")`	イメージへのURL。複数のイメージを指定するには、URLをコンマで区切ります
`none`	背景画像は表示されません。これはデフォルトです
`linear-gradient()`	リニアグラデーションを背景画像として設定します。少なくとも2つの色を定義する（上から下へ）
`radial-gradient()`	ラジアルグラデーションを背景画像として設定します。少なくとも2つの色を定義する（中央から端まで）
`repeating-linear-gradient()`	線形グラデーションを繰り返す
`repeating-radial-gradient()`	ラジアルグラデーションを繰り返す
`initial`	このプロパティをデフォルト値に設定する
`inherit`	親要素からこのプロパティを継承する

サポートするデスクトップブラウザ対応・互換性

Property	Desktop 互換性
background-image	Chrome	Edge	Firefox	Internet Explorer	Opera	Safari
基本サポート	フルサポート◯1	フルサポート◯12	フルサポート◯1	フルサポート◯4	フルサポート◯3.5	フルサポート◯1
Multiple backgrounds	フルサポート◯1	フルサポート◯12	フルサポート◯3.6	フルサポート◯9	フルサポート◯あり	フルサポート◯1.3
Gradients	フルサポート◯1	フルサポート◯12	フルサポート◯3.6	フルサポート◯10	フルサポート◯11	フルサポート◯4
SVG images	フルサポート◯8	フルサポート◯12	フルサポート◯4	フルサポート◯9	フルサポート◯9.5	フルサポート◯5
`element()`	サポートなし✖	サポートなし✖	フルサポート◯あり	サポートなし✖	サポートなし✖	サポートなし✖
`image-rect()`	サポートなし✖	サポートなし✖	フルサポート◯あり	サポートなし✖	サポートなし✖	サポートなし✖
任意の`<image>`値	フルサポート◯あり	不明	サポートなし✖	不明	不明	不明

：background-image 関連記事