no-image

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

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

backgroundプロパティについて

backgroundプロパティ

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

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

backgroundプロパティの省略化

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

プロパティの指定順序はありませんので自分で分かりやすく記述できますが、【background-size】だけは【background-position】の後に【/】で区切って記述します。