CSSのbackgroundプロパティを使うと、背景の設定をまとめて記述することができます。ちなみにまとめて記述することを「ショートハンド」と呼びます。

ひとつずつ設定するよりも記述が簡単になるので、ぜひ覚えておきましょう!

スポンサーリンク

backgroundは以下のプロパティをまとめて設定できる

設定できるプロパティは以下の通りです。

実務でよく使われるものは上5つのbackground-color / background-image / background-position / background-repeat / background-sizeです。記述しないものは各プロパティの初期値が設定されます。

background-color 背景に色を設定する
background-image 背景に画像を使用する
background-position 背景画像の開始位置を設定する
background-repeat 背景画像の繰り返し設定をする
background-size 背景画像のサイズを指定する
background-origin 背景を配置するエリアを設定する
background-attachment 画面スクロールに応じた背景画像の固定・移動を指定する
background-clip 背景の描画領域を設定する

まとめて設定しても、個別に設定しても意味は同じ

以下の2つの記述は、書き方は違いますが同じ意味になります。backgroundを使って書いたほうが、まとめて記述することができ記述が長くならずに済むので簡単です。

backgroundでまとめて記述

background-imageとbackground-repeatの設定をbackgroundでまとめて記述

 background: url("./image/sample01.png") repeat;

それぞれを個別に記述

background-imageとbackground-repeatの設定をそれぞれのプロパティで個別に記述

background-image: url("./image/sample01.png");
background-repeat: repeat;

backgroundの記述の注意点

backgroundプロパティで記述する時の注意点は2点です。

background-sizeの記述方法

backgrond-sizeの指定はbackground-positionの指定のあとに /(スラッシュ)を入れて続けて記述する。

(例)
background: url("./image/sample01.png") center/50%;

background-originとbackground-clipの記述方法

background-originとbackground-clipは使えるプロパティ値が同じですが、1つだけ記述した場合は両方に適用され、2つ記述した場合は前者がbackground-originに、後者がbackground-clipに適用されます。

background-originとbackground-clipは記述せず初期値のままで使えることが多いので、知識の一つとして覚えておけば大丈夫です。

backgroundのコードサンプル

他にもいくつかbackgroundを使った記述例をいくつかご紹介します。基本的に半角スペースで区切って各プロパティの属性値(プロパティ値)を記述していけば良いだけです。

backgroundで背景色を指定

背景色が#010101になる設定をbackgroundプロパティで記述

background: #010101;

backgroundで背景画像と開始位置を指定

背景画像をsample.pngにして、背景画像の開始位置が右上になるよう設定

background: url("./sample01.png") right top;

backgroundで背景画像と背景画像のサイズ、繰り返しを指定

背景画像をsample02.pngにして、背景画像のサイズを幅100px、縦50pxに設定して、横に繰り返す設定

background: url("./sample02.png") 0%/100px 50px repeat-x;

こんな風に各プロパティの属性値をどんどんつなげていけば設定が可能です。

コンマで区切ると、背景を重ねることができる

backgroundはコンマで区切って記述すると、複数の背景を重ねることができます

backgroundの複数重ねコードサンプル

先に記述したほうが上にくるようになっています(この場合はsample01.pngが上)。カンマで区切って続けて記述すれば良いので、書き方としては難しくないと思います。

background: url("./sample01.png") left top no-repeat, url("./sample02.png") left top repeat;

CSSで背景の設定をする時はbackgroundプロパティでまとめて記述!

CSSで背景の設定をする時はbackgroundプロパティを活用してまとめて記述したほうが短時間で済むので簡単ですよ。

他にもまとめて記述できるCSSプロパティはいくつかあるので、使えるものはどんどん使っていって効率的なコーディングをしていきましょう。