CSSで制御する事のできるバックグラウンド（設けられた領域の背景）に関する属性のリストです。

CSSプロパティのバックグラウンド属性に関するリスト

• background: ★ ★ ★;※背景の値を一度に指定
• background-color: ★;※背景の色
• background-image: ★;※背景に画像を表示
• background-attachment: ★;※背景画像の固定方法
• background-repeat: ★;※背景画像の繰り返し表示
• background-position: ★;※背景画像の表示位置

background: ★ ★ ★;

バックグラウンドで一括指定できるプロパティ。全ての要素を含めるわけではなく、background-imageのみの記述も可能。順番に特に指定はない。

ただしbackground-positionによる数値入力は左・上の順番なので注意。

/* 全てを指定した場合 */
background: #ffffff url(../images/sample.jpg) repeat-x fixed left top;

/* 背景画像のみ */
background: url(../images/sample.jpg) repeat-x;

background-color: ★;

インライン・ブロック要素の背景色を指定できる属性。指定されていない場合は透明色となる。インライン要素に指定した場合はline-height属性の値分の背景が表示される。

/* カラー名 */
background-color: white;

/* RGBの値 */
background-color: #ffffff;

background-image: ★;

背景に外部イメージを指定できる属性。繰り返し表示ができるので1pxの画像を使いグラデーションの背景を作ったりなどできる。リンク要素に指定してロールオーバーのボタンを作ったりもできる。

画像の相対パスURLはCSSファイルが置いてあるフォルダーから始まる。

background-image: url(../images/sample.gif);

background-attachment: ★;

背景画像を固定したい場合に指定する属性。背景を固定した場合、背景画像が追走しているような表現になる。通常はスクロールされる。

background-attachment: fixed;

background-repeat: ★;

背景画像を繰返し表示させたい場合に指定する属性。タイルを並べたような表現。

background-repeat: no-repeat;

background-position: ★;

背景画像の表示位置を指定する属性。左上を基準に制御する。

/* 基本 */
background-position: left top;

/* 数値 左から10px/上から50% */
background-position: 10px 50%;