仕様

background-image<bg-image>#
一括/個別個別指定プロパティ
初期値none
適用対象すべての要素
継承なし
百分率なし
計算値計算された画像
補足<bg-image> = <image> | none

background-image プロパティは、要素の背景画像を設定する個別指定プロパティです。
非継承プロパティで、初期値は none なので、省略時は none が指定値となります。

最初に指定されたレイヤーが、ユーザーに対し最も手前にあるかのように描画されます。

値の数

  1. cdvSample300 > div { height: 6em; background-repeat: repeat; }
  1. <div class="cdvSample300">
  2. <div style="">例</div></div>

例示の雛型です。style属性を書き換えて例示しています。

例
  1. background-size: 1em 1em;
  2. background-image: linear-gradient(transparent 95%, rgba(0,0,0,.10) 50%, rgba(0, 0, 0, .10) ),
  3. linear-gradient(90deg, transparent 95%, rgba(0, 0, 0, .10) 50%, rgba(0, 0, 0, .10) );

縦線と横線 の２つ指定しました。
最初に指定されたレイヤーが、ユーザーに対し最も手前にあるかのように描画されます。

例
  1. background-size: 1em 1em;
  2. background-image: linear-gradient(90deg, transparent 95%, rgba(0, 0, 0, .10) 50%, rgba(0, 0, 0, .10) );

縦線を１つ指定しました。

例

画像

  1. cdvSample300 > div { height: 6em; background-repeat: repeat; }
  1. <div class="cdvSample300">
  2. <div style=""></div></div>

例示の雛型です。style属性を書き換えて例示しています。

  1. background-image: url(./sample.png);

画像のURL を指定しました。

  1. background-image: linear-gradient(blue, lime);

グラデーション関数 を指定しました。

キーワード

  1. cdvSample300 > div { height: 6em; background-repeat: repeat; }
  1. <div class="cdvSample300">
  2. <div style="">例</div></div>

例示の雛型です。style属性を書き換えて例示しています。

  1. background-image: none;

キーワード none を指定しました。none は、背景画像を使用しません。none は background-image プロパティの初期値です。

例

CSS全体のキーワード

値を１つのみ指定して全体に対して適用されています。１つ１つに対するキーワードとしての使用は出来ません。
個別に適用したい場合は、個別指定プロパティ(border-top-color, border-right-color, border-bottom-color, border-left-color)を使用して設定します。

  1. cdvSample350 > div { height: 3em; background-repeat: repeat; padding: 1em; background-image: url(./sample.png); }
  2. cdvSample350 > div > div { height: 4em; background-repeat: repeat; outline: solid 1px; }
  1. <div class="cdvSample350">
  2. <div><div style=""></div></div></div>

例示の雛型です。子要素のstyle属性を書き換えて例示しています。
パティングは、親子の余白として指定しています。高さの指定は、意図的に子要素を親要素からはみ出させる事により背景の色を継承しているのか透過しているのか明確化する為に記述しています。

  1. background-image: inherit;

キーワード inherit を指定しました。inherit は、明示的な継承です。

  1. background-image: initial;

キーワード initial を指定しました。initial は、プロパティの初期値を設定します。background-image プロパティの初期値は none です。

  1. background-image: unset;

キーワード unset を指定しました。unset は、プロパティをリセットし継承プロパティなら継承，非継承プロパティなら初期値を設定します。background-image プロパティは非継承プロパティなので初期値の none を設定します。