background: 背景関連の設定を一括指定する
backgroundは、背景関連の設定を一括で指定できるプロパティです。スペースで区切って羅列。順番は任意。
以下のプロパティ値をまとめて設定でます。
background-color
background-image
background-position
background-repeat
background-attachment
background プロパティ仕様
| 値 | ||
|---|---|---|
| color | 背景の色 | カラーコード #ccc カラーネーム red、grayなどと記述 |
| image | 背景に使用する画像 | 値は、solid , double , groove , ridge , inset , outset , none |
| position | 背景画像の表示位置 | top, left ,right, bottom, center 詳細はbackground-position参照 |
| repeat | 背景画像の繰り返し設定。 | repeat-x … 背景画像を上水平一列に繰返す repeat-y … 背景画像を左端垂直一列に繰返す no-repeat … 背景画像を繰り返さない （固定） |
記述例
サンプル ー 背景色と画像位置を指定 ー
sample css ↓
.sample
{background: #ffefd5 url(sample.gif) no-repeat right top;
height: 150px;
}
html ↓
<html>
<body>
<div class="sample">背景画像の表示位置を指定
</div>
</body>
</html>
実際の見え方 ↓
背景画像の表示位置を指定
