CSS：背景のスタイルを定義

背景色を定義する

要素名{

 　background-color:色;

}

※透明色を設定する場合、16進数ではなく、rgbaにて設定すること。

　⇒IEが16進数非対応のため。

背景画像を定義する

要素名{

 　background-image:url(画像のパス);

}

※背景色と背景画像を同一セレクタに指定した場合、背景色が背面に設定される

背景画像の繰り返しを定義する

要素名{

 　background-repeat:繰り返しを定義する値;

}

背景画像の開始位置を定義する

要素名{

 　background-position:開始位置を定義する値;

}

背景画像の固定・移動を定義する

要素名{

 　background-attachment:固定・移動を定義する値;

}

移動を定義する値

scroll（初期値）：スクロールと共に背景画像も移動

fixed：背景画像が固定され、スクロールしても動かない

背景画像のサイズを定義する

要素名{

 　background-size:サイズを定義する値;

}

サイズを定義する値

数値：幅　高さ

auto：自動計算（初期値）

contain：画像が切れないよう全て表示

cover：要素に空白ができないよう全て埋めるように表示

背景のスタイルを一括定義する

例：

要素名{

 　background:#F0F0F0 url(パス) repeat-x 100px 200px fixed;

}

背景画像に関する定義を半角スペースで区切りながら一括指定することができる。

注意点

• 位置(background-position)、サイズ(background-size)を指定する時は、位置、サイズの順で記述にして、スラッシュ(/)で区切る。
• 一括定義に含めていないプロパティの定義を、一括定義の前に個別で記述した場合、適用されない。(理由：同一プロパティの定義を複数記述した場合、後に記述した定義が適用される。後に記述した一括定義内に、当該プロパティの指定がない場合、当該プロパティは初期値に定義したとみなされるため。）

※上記注意点の内容が間違いを誘うため、backgroundの一括定義は、阿久津先生としては非推奨。

複数の背景画像を定義

要素名{

  background-image:url(../img/bg_sweets.png),url(../img/bg_usagi.png);

  background-repeat:repeat-x;

  background-position:top center,bottom center;

}

• 前に指定した画像が前面。後に指定した画像が背面。
• 共通しているプロパティは1つ記述すれば、全ての画像に適用される。