【CSS】background(背景一括指定)の使い方をわかりやすく説明

この記事では、CSSにおけるbackgroundプロパティの一括指定についてまとめてあります。

わかりやすく説明したつもりなので、よかったらぜひご覧ください。

1.動画で解説

この記事は、youtubeにも投稿してあります。

動画がよい方は、こちらをご覧ください。

2.要点

この記事の要点です。

• backgroundプロパティでimage、color、position、size、repeat、attachmentを一括指定できる
• 原則、値は順不同でスペース空ける
• positionとsizeだけはpositionとsizeの順でスラッシュ(/)で区切る
• 表示されないブラウザのときはsizeだけ別に書く

以下、説明していきます。

3.一括指定がないと・・・

背景を設定するプロパティには以下の７つあります。

背景画像：background-image
背景画像の大きさ：background-size
背景色：background-color
背景画像の表示位置：background-position
背景画像の繰り返し：background-repeat
スクロール時の背景画像の表示：background-attachment

つまり、以下のような背景の設定をしたい場合、

こんなコードになるわけです。

3.一括指定backgroundプロパティ

上記コードですが、書くのが面倒ですよね？

ここで役に立つのが一括指定です。

つまりbackgroundプロパティを使えば以下のように一括で値を指定することができるわけです。

backgroundプロパティの一括指定にはいくつか注意点があります。

3-1.値を書く順番

原則、値は順不同です。

値と値の間にはスペースを入れます。

3-2.positionとsizeの取り扱い

このような問題があるため、positionとsizeの値だけは、position、sizeの順番に書いて値をスラッシュ(/)で区切ることがルールです。

また数値を１つ書いた場合は、positionを指定したと扱われます。

3-3.値を省略したとき

一括指定で値をかかなかったプロパティは、リセットされます。

つまり、初期値になります。

各プロパティの初期値は以下の通り。

リセットされるだけなのであとから指定することは可能です。

3-4.表示されないとき

ブラウザによって、一括指定がうまく表示されないときがあります。

実はこれbackground-sizeの値が悪さをしているのです。

こんなときは、background-sizeだけ値は別に書く必要があります。

こんな感じです。

これならうまく表示されるはずです。

以上です。