background

CSSプロパティ「background」の解説とサンプル。

背景に関する値を一括で指定するプロパティ。

background

背景に関する値を一括で指定するプロパティ。

複数の値を一緒に指定することで、宣言数を減らす（＝CSSをシンプルに書き上げる）ことができる。なお、一括での指定を必要としない値は省略することが可能。（値はどの順番で記載しても可。）

background:色画像URL 動作配置繰り返し;
（複数の値を半角スペースで区切って指定）

色	background-colorの解説ページを参照
画像URL	background-imageの解説ページを参照
動作	background-attachmentの解説ページを参照
配置	background-positionの解説ページを参照
繰り返し	background-repeatの解説ページを参照

[CSSの記述]

.sampleA { background:#3366cc; }

[HTMLの記述]

<p class="sampleA">テキストテキスト</p>

[ブラウザ上の表示]

背景色を#3366ccに指定。

[CSSの記述]

.sampleB { background:url('hogehoge.gif') top repeat-x; }

[HTMLの記述]

<p class="sampleB">テキストテキスト</p>

[ブラウザ上の表示]

背景画像をボックス上部に横方向のみに繰り返し表示。

CSSレイアウト実践講座カテゴリ