background - 背景に関する指定をまとめて行う

　backgroundプロパティは、背景に関するすべてのプロパティをまとめて一括指定できるプロパティです。


background: url("sample.jpg") repeat-x #008;

　１枚の画像を使って、X軸（横）方向だけに繰り返して表示させて、背景の色を「#008」に設定してみました。

構成要素のプロパティ

　backgroundで使用できるプロパティの一覧です。これらのプロパティの値を、backgroundの値にスペースで区切ってまとめて指定します。位置とサイズの指定については、決まりがあるのでご注意ください。

ルール

順番

　値は順不同で指定できます。上記のサンプルの順番を入れ替えて記述しても問題なく表示されます。


background: repeat-x #008 url("sample.jpg");

位置とサイズ

　１点だけ守らなければいけないのが、位置（background-position）、またはサイズ（background-size）を指定する時です。この2つを利用する時は、位置、サイズの順でセットにして、スラッシュ（/）で区切らないと文法エラーを起こしてしまいます。

⭕ Correct writing


background: url("sample.jpg") top right / 120px 92px repeat-x #008;

❌ Wrong writing


background: url("sample.jpg") 120px 92px / top right repeat-x #008;

❌ Wrong writing


background: 120px 92px url("sample.jpg") top right repeat-x #008;

省略

　backgroundには、全ての値を指定する必要はありません。省略されたプロパティには、そのプロパティのデフォルト値が適用されます。例えば、下記はよく使う、背景画像の指定方法です。この時、背景以外の全てのプロパティには、各プロパティの初期値が値としてセットされます。


background: url("sample.jpg");

　例えば、下記の場合、先に指定した background-repeatプロパティの値（no-repeat）は、後に指定した backgroundの影響で、初期値の repeat に書き換えられてしまいます。何故なら、backgroundで background-repeatプロパティが省略されているため、自動的に初期値（repeat）がセットされるからです。


background: no-repeat;
background: url("sample.jpg");

Browser support

Home

HTML

CSS

background-attachment: 背景画像の固定・移動を指定する。
background-clip: 背景の適用範囲を指定する。
background-color: 背景色を指定する。
background-image: 背景画像を指定する際に使用します。
background-origin: 背景の基準位置を指定する。
background-position: 背景画像の表示開始位置を指定する。
background-repeat: 背景画像のリピートの仕方を指定する。
background-size: 背景画像のサイズを指定する際に使用します。

JavaScript

API

PHP