背景画像のサイズを指定するスタイルプロパティbackground-size
は、ショートハンドで1行にまとめられないものなんだと思い込んでいて
ながい間、このように分割して指定していました。
.xxx { background: lightgray url('xxx.svg') no-repeat; background-size: 100px 100px; }
が、/
をはさめばショートハンドでかけることが発覚!
.xxx { background: lightgray url('xxx.svg') no-repeat / 100px 100px; }
ショートハンドだと複数背景の設定がわかりやすい
ショートハンドで1行にまとめられると、カンマ区切りで複数の背景を指定するとき
スッキリにまとまってわかりやすいです。
.xxx { background: linear-gradient(white, white) no-repeat bottom / 13.5em 2px, linear-gradient(lightgray, lightgray) no-repeat bottom / 100% 2px; }
もし、ショートハンドを使わなかったら
こんな感じにごちゃごちゃします。
.xxx { background-image: linear-gradient(white, white), linear-gradient(lightgray, lightgray); background-repeat: no-repeat, no-repeat; background-position: bottom, bottom; background-size: 13.5em 2px, 100% 2px; }