background

background

backgroundプロパティ

要素の背景を指定する簡略化プロパティ。以下のプロパティの項目を一括して指定することが出来る。

background-image
背景画像URI
background-position
背景画像の基準位置
background-repeat
背景画像の繰り返し動作
background-attachment
画面に対する画像の挙動
background-color
背景色

backgroundプロパティの特性

background簡略化プロパティはその特性として、まず各プロパティの特性をすべてその初期値に設定し、それから宣言で提供される明示的な値をセレクタマッチする要素へ割り当てる。言い換えると、明示されていない(=省略された)値は、暗黙的に各プロパティの初期値をとっていると解釈されることになる。

例えば次のような指定があったとする。

h1 { background: url("http://d.hatena.ne.jp/images/hatena_de.gif"); }

このときbackgroundプロパティには、同時に設定されることが可能なbackground-positionbackground-repeatbackground-attachmentbackground-colorプロパティの値が明示されていないが、実際にはそれぞれの初期値である「0% 0%」、「repeat」、「scroll」、「transparent」が設定されていることになる。

このため、直前に同じ詳細度を持ったbackground-colorプロパティなどがあった場合にはその指定が打ち消されるので注意。

h1 {background-color: black;}
h1 {background: url("http://d.hatena.ne.jp/images/hatena_wh.gif");}

上の例では、H1要素のbackground-colorは「black」ではなく「transparent」値をとる。詳細度を上げるか、または順序を逆にすることでこの問題は解決する。

h1 {background: url("http://d.hatena.ne.jp/images/hatena_wh.gif");}
h1 {background-color: black;}

対応する値・指定方法

対応する値

上記の各プロパティで指定できる各値に対応する。詳細は当該プロパティの解説を参照のこと。

値の指定方法(一例)

複数の値を指定するプロパティだが、他のプロパティと同様、1つ以上の空白文字列で値を区切り、列挙する。

h1 { background: url("http://d.hatena.ne.jp/images/hatena_wh.gif") 50% 50% no-repeat scroll #ffffff; }

仕様情報

[<'background-color'> || <'background-image'> || <'background-repeat'> || <'background-attachment'> || <'background-position'>] | inherit
初期値
簡略記述特性については定義されない
適用可能要素
すべての要素
値の継承
しない
パーセント値の扱い
<'background-position'>値で使用できる
メディア
視覚メディア

メモ

  • 値の指定については順不同です。

関連するプロパティ

color
前景色(文字色)を設定
background-image
背景画像URIを設定
background-position
背景画像の基準位置を設定
background-repeat
背景画像の繰り返し動作を設定
background-attachment
画面に対する画像の挙動を設定
background-color
背景色を設定

* はてなダイアリーキーワード:background

Error : RSSが取得できませんでした。 Error : RSSが取得できませんでした。