最終更新日

backgroundプロパティ

backgroundプロパティは、背景に関するプロパティの値をまとめて記述するためのものです。それぞれの値を半角スペースで区切って記述します。

background-sizeの値を指定する場合は、「background-positionの値 / background-sizeの値」のように、半角スラッシュで区切ります。

値にボックスの指定がある場合は、1個の値ならbackground-originbackground-clipの両方に共通の値となり、2個の値がある場合は、最初の値はbackground-origin、次はbackground-clipの値となります。

複数の画像を指定する場合には、画像ごとにプロパティをまとめ、カンマで区切ります。最初に指定した背景が1番上に配置され、次の背景は下に配置されていきます。

それ以外には、値の記述順に決まりはありません。プロパティの指定を省略することもできます。

なお、background-colorの値は、1番下のレイヤーになります。

CSS3での変更点
特にありません
初期値 適用先 継承
各プロパティの初期値 すべての要素 なし
説明
background-colorの値 背景色
background-imageの値 背景画像
background-repeatの値 背景画像の繰り返し方法
background-positionの値 背景画像の表示位置
background-clipの値 背景の描画領域
background-sizeの値 背景画像のサイズ
background-originの値 背景画像の配置基点
background-attachmentの値 背景画像のスクロール方法
サンプルコード
background: url("logo.png") no-repeat left top , url("back.png") repeat-x top / cover;
background: #ccc url("metal.jpg") top left / 100% auto no-repeat;
background: padding-box url("paper.jpg") white center;
参考文献:CSS Backgrounds and Borders Module Level 3外部リンク
HOME