背景関連のプロパティをまとめて指定しよう！（background プロパティ）

使用プロパティセレクタ { background: 背景関連プロパティの値; }

CSS一覧プロパティ辞典 … background プロパティ

background プロパティを使うと、背景関連のプロパティ５種類をまとめて記述できます。値にはbackground-color プロパティ、background-imege プロパティ、background-repeat プロパティ、background-position プロパティ、background-attachment プロパティの値を指定できます。これらのプロパティの値を半角スペースで区切り、どれを省略してもかまいません。また記述する順序にも決まりはありません。

使用例

background-attachment プロパティの項目と同じ使用例（ブラウザをスクロールしたときに背景画像を固定する）を使い、背景関連のプロパティを background プロパティにまとめて記述しています。値には次のプロパティの値を記述します。またセレクタには「body」を入力します。
background-color プロパティの値を「moccasin」にして背景色を指定し、 background-imege プロパティの値は、画像は同じフォルダ内のファイルを参照するとして、相対パスで指定しているので、ファイル名（ここでは「haikei1.gif」）をそのまま記述します。background-repeat プロパティの値を「no-repeat」とし、background-position プロパティの値を「center center」とし、背景画像を繰り返しをしないように設定しWebページ中央に配置します。さらにbackground-attachment プロパティを使用して値を「fixed」とし、ブラウザをスクロールしたときに背景画像を固定したように見せます。なお、使用画像は下の画像を使用しています。

記述例
<html> <head> <title>一人暮らしの前向き料理</title> <style type="text/css"> body { background: moccasin url(haikei1.gif) no-repeat center center fixed; } p { line-height: 1.7em; } </style> </head> <body> <h1>簡単に作れるワンポイント料理</h1> <p>料理を少しおいしくするための<br> ワンポインを紹介します！</p> <p>おいしいチャーハンの作り方</p> 省略 </body> </html>