background

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

CSSレイアウト実践講座

CSSレイアウト実践講座について

運営者プロフィール

運営者ブログ*

お問い合わせ

background

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

background

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

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

backgroundプロパティの書き方

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

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

使用例 - サンプル(A) / サンプル(B) / サンプル(C)

サンプル(A)

[CSSの記述]

.sampleA { background:#3366cc; }

[HTMLの記述]

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

[ブラウザ上の表示]

背景色を#3366ccに指定。

サンプル(B)

[CSSの記述]

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

[HTMLの記述]

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

[ブラウザ上の表示]

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