CSS Backgroundの短縮形

CSS background - 省略形のプロパティ

コードを短くするために、すべての背景プロパティを1つのプロパティで指定することもできます。これは短縮プロパティと呼ばれます。

次のように書く代わりに

body { background-color: #ffffff; background-image: url("img_tree.png"); background-repeat: no-repeat; background-position: right top; }

省略形のプロパティbackgroundを使用できます。

省略形プロパティを使用して、1 つの宣言で背景プロパティを設定します。

body { background: #ffffff url("img_tree.png") no-repeat right top; }

省略形プロパティを使用する場合、プロパティ値の順序は次のとおりです。

プロパティ値の1つが欠けていても、他の値がこの順序である限り問題ありません。値がないため、上記の例ではbackground-attachmentプロパティを使用していないことに注意してください。

プロパティ	説明
background	1つの宣言ですべての背景プロパティを設定します
background-attachment	背景画像を固定するか、ページの残りの部分と一緒にスクロールするかを設定します
背景クリップ	背景の描画領域を指定します
background-color	要素の背景色を設定します
background-image	要素の背景画像を設定します
background-origin	背景画像を配置する場所を指定します
background-position	背景画像の開始位置を設定します
バbackground-repeat	背景画像の繰り返し方法を設定します
background-size	背景画像のサイズを指定します