サイトを作る際、CSSのbackgroundをなるべく省略した書き方をしたくて「ショートハンド」で書く機会が多いです。
僕の物覚えが悪いのか、いまいち書き方が思い出せなくてふわっとした記憶で書くと「background-sizeが効かない」ことが何度かあったんですね。
そんなときの対処法をご紹介します。
backgroundをショートハンドで書く
backgroundをショートハンドで書くときはこのように書きます。
body {
background: url("bg.png") center center / cover no-repeat fixed;
}
background-positionのあとにbackground-sizeの指定をする場合はスラッシュを挟む必要があるそうです。
これを忘れがちなんですが、このスラッシュを忘れることでbackground-sizeが効かなくなってるそうです。
こちらの記事を読むと詳しくわかります。(※上記のソースも下記の記事を元にして書きました。)
ちなみに、こちらは背景にディスプレイサイズの画像を敷くときの例ですので、利用シーンに応じて書き換えて使ってくださいね。
それぞれのプロパティの役割についてはこちらの記事をご覧ください。
最後に
僕は書き方を忘れがちなのでこの記事を何度も開いてコピペして使いそうです。
みなさんも必要なときにはぜひお使いください！