backgroundプロパティで背景に関する指定をまとめて行う

backgroundプロパティによって、背景に関する指定をまとめて行うことができます。

よく書き方を忘れてしまうので(笑)、備忘録として残しておきます。

HTML

<div class=“box”></div>

CSS

.box {
background: #000 url(https://背景画像のURL) no-repeat center center / contain;
height: 300px;
}

上記のように記述すると、

・background-color
・background-image
・background-repeat
・background-position
・background-size

が一度に指定できます。

便利なので使ってみてください。

 

また、background-sizeの詳細も含めた参照記事はこちらです。