久しぶりに CSS を書いていると、ついつい忘れてしまうのが background のショートハンドです。
今回は background ショートハンドへ background-size を記述する方法をメモしておきます。
目次
- background ショートハンド（複数指定） background-size の記述方法
- まとめ
background ショートハンド（複数指定） background-size の記述方法
以下、background でよく行うであろうプロパティを個別に記述した場合、ショートハンドで記述した場合のサンプルをそれぞれ用意しました。
background 個別指定
[code]
body {
background-image: url(path);
background-position: center center;
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
background-color: #CCCCCC;
}
[/code]
background ショートハンド（複数指定）
ショートハンドでは /cover とすることで background-size: cover を指定することができます。
[code]
body {
background: #CCCCCC url(path) center center /cover no-repeat fixed;
}
[/code]
まとめ
CSS の background ショートハンドは CSS2 では多様していましたが、CSS3 からは設定項目が大幅に増えたため、コードの見通しが悪くなってしまいがちです。
慣れないうちは、多少面倒でも個別にプロパティを指定し記述する方法が、混乱も少なくいいのかもしれませんね。
この記事がみなさんのお役に立ちましたら、下記「Share it」よりブックマークやSNSで共有していただければ幸いです。
