CSSのbackgroundプロパティの省略化

2017年11月28日 2017年11月28日

CSSで【background】と【background-color】等の違いがよくわからなかったのでまとめてみました。簡単に言うと個別に記述していたものを一括にまとめて省略することができるので便利ということでした。

Contents

1 backgroundプロパティについて
- 1.1 backgroundプロパティ
- 1.2 backgroundプロパティの省略化

backgroundプロパティについて

backgroundプロパティ

よく使いそうなものを抜粋して挙げています。

プロパティ	概要
background-color	背景色を指定
background-image	背景画像を指定
background-repeat	背景画像の繰り返しを指定
background-position	背景画像の位置を指定
background-size	景画像の大きさを指定
background-attachment	背景画像の固定/スクロールを指定

backgroundプロパティの省略化

個別に記述していたものを一括にまとめて省略することができます。

セレクタ {
background:#fff;
background-image:url(image/img.jpg) ;
background-repeat:no-repeat;
background-position:scroll;
background-size:cover;
background-attachment:eft top;
}
/*省略化（例）*/
セレクタ {
background: #fff url(image/img.jpg) no-repeat scroll /cover left top; 
}
/*省略化（例）のbackgroundプロパティと値の対照*/
background: 【background-color】 【background-image】 【background-repeat】 【background-position】  /【background-size】 【background-attachment】;