background
Home>CSS>プロパティリファレンス>background
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つだけ固定して表示します。画像以外の背景は黒く塗りつぶします。
関連リンク
- プロパティリファレンス:background-attachment
- プロパティリファレンス:background-color
- プロパティリファレンス:background-image
- プロパティリファレンス:background-position
- プロパティリファレンス:background-repeat
よく読まれている記事
- 右クリックメニューの表示が遅い【Information】
- 画像の一部にリンクを貼る(クリッカブルマップ【Dreamweaver】
- 一定時間でローテーションする広告【JavaScript】
- Dreamweaver【Dreamweaver】
- クリックした画像を拡大・縮小する【JavaScript】
UpDate:2010-7-1