こんにちは。

今日は比較的暖かい1日でした。

そろそろ紅葉シーズンですね。人混みは嫌なので穴場スポットはないものかと考えております笑

さて、本題に入ります！

backgroundプロパティを一括設定する場合の注意点

今日はbackgroundプロパティにまつわる注意点について書きます。

その前にbackgroundプロパティの種類はどれほどあるかご存知でしょうか？

念のためにおさらいしてみますね＾＾

backgroundプロパティの種類

種類は8つあり、

ですね♩

では次に一括設定する上での注意点について書きます^ – ^

一括設定する場合の注意点

省略したプロパティは初期値になる

題の通りなのですが、一括指定したときに省略したプロパティは初期値が適応されます。

つまり、もし以前個別に設定していた場合初期値が上書きされてしまうということですね(＞＜)

例えばですが、

background-color:#f5f5f5;
background:url(assets/images/cont_bg01.jpg) left top no-repeat;

このように書くと後から指定したものが反映されるので、以前背景色を設定していたのに一括設定のとき省略すると初期値であるtransparent(透明色)が反映されてしまいます。

これを知っておかないといけません！

【background-size】と【background-position】はセット

background-sizeを一括設定に含む場合、background-positionも指定しないと効きません。

background-sizeといえばcontainやcoverといった値をよく使いますよね！

私は最初これがわかっていなくてbackground-sizeを指定したのになぜか反映されずに困りました(^^;

これは次の指定する順番にも関係してきます。

background-position / background-sizeの順番に記述する

【background-position】を記述した後、 /（スラッシュ）をはさんで【 background-size】を記述します。

例えば

background: url(assets/images/cont_bg01.jpg)  left top / cover no-repeat ;

このような書き方です！

この2つはセット！これさえ守ればどの位置にかいても大丈夫です。

background: left top / cover url(assets/images/cont_bg01.jpg) no-repeat ;

まとめ

いかがだったでしょうか？

ポイントは

1. 省略したプロパティは初期値になる
2. 【background-size】と【background-position】はセット
3. background-position / background-sizeの順番に記述する

の3つです。

参考になれば幸いです。

では今日はここまで〜〜