background

Home>CSS>プロパティリファレンス>background

この情報はお役に立ちましたか?よろしければ皆様にもお知らせください。

  このエントリーをはてなブックマークに追加 mixiチェック  

backgroundプロパティの役割

背景に関する以下のプロパティを一括して設定できます。

背景画像の固定 background-attachment
背景色 background-color
背景画像 background-image
背景画像の位置 background-position
背景画像の並べ方 background-repeat

これらの値は順不同です。
また、省略した値はデフォルト値が反映されます。
background-colorなどの個別にプロパティを指定した場合、backgroundプロパティがその後に配置されていると、backgroundプロパティに書いた内容が優先されます。

backgroundプロパティに設定できる値

背景画像の固定

fixed スクロールした場合でも同じ位置に固定表示。
inherit 上位要素の設定を反映。
scroll スクロールと一緒に移動する。

背景色

色名で指定するか、16進数で指定する2通りの方法があります。

背景画像

「url(ファイルパス)」という形式で記述します。

背景画像の位置

bottom 指定した要素の下に画像の下を合わせる。
center 指定した要素の中央に画像を表示。
left 指定した要素の左に画像の左を合わせる。
right 指定した要素の右に画像の右を合わせる。
top 指定した要素の上に画像の上を合わせる。

上記の値は空白で区切って2つまで指定できます。
2つ指定した場合は、横→縦の順に指定します。
数値、または%で指定することも可能です(左端または上端から数えた数になる)。

背景画像の並べ方

inherit 上位要素の背景画像の並べ方を反映。
no-repeat 画像を一つだけ表示。
repeat 画像を縦横に繰り返して表示。初期値。
repeat-x 画像を横に繰り返して表示。
repeat-y 画像を縦に繰り返して表示。

backgroundプロパティの使い方

background:url(../data/back.jpg) #000000 fixed bottom no-repeat;

上記のサンプルでは、back.jpgを背景画像に1つだけ固定して表示します。画像以外の背景は黒く塗りつぶします。

関連リンク

よく読まれている記事

UpDate:2010-7-1