background

backgroundは、背景に関するスタイルを一括で指定するスタイルです。

解説

背景に関するスタイルをまとめて指定する時に使用します。
指定できるスタイルは以下８つです。

• background-color
• background-image
• background-repeat
• background-position
• background-attachment
• background-clip
• background-size
• background-origin

値と値の間は半角スペースで区切って指定します。
値の順番に決まりはありません。
８種類のスタイルを全て指定しなくてもOKです。

値

backgroundに指定できる値は、下記それぞれのページをご覧ください。

• background-color
• background-image
• background-repeat
• background-position
• background-attachment
• background-clip
• background-size
• background-origin

サンプル

背景を「ピンク」にする

.sample01 {
  background:pink;
}

<div class="sample01">背景色をピンクにしました</div>

背景画像を「back01.png、左右は右、上下は中央、no-repeat」で表示する

.sample02 {
  background:url('image/back01.png') right center no-repeat;
}

<div class="sample01">back01.png、左右は右、上下は中央、no-repeat</div>

備考

• backgroundには必須の値はありません。値を１つ以上指定すればOKです。

関連項目

• background：背景に関するスタイルをまとめて指定する
• background-color：背景色を指定する
• background-image：背景に画像を指定する
• background-repeat：背景画像の表示方法を指定する
• background-position：背景画像の位置を指定する
• background-attachment：背景画像のスクロール方法を指定する
• background-clip：背景画像を表示する範囲を指定する
• background-size：背景画像のサイズを指定する

Tweet