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

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

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

スポンサーリンク

1.動画で解説

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

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

2.要点

この記事の要点です。

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

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

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

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

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

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

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

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

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

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

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

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

1.値を書く順番
2.positionとsizeの取り扱い
3.値を省略したとき
4.表示されないとき

3-1.値を書く順番

原則、値は順不同です。

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

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

background-positionプロパティの値
   数値、top、bottom、left、right

background-sizeプロパティの値
   数値、auto、cover、contain

つまり一括指定で数値を書いた場合、どちらの指定かわからない・・・

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

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

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

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

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

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

background-image:none

background-color:transparent

background-position:0% 0%

background-size:auto auto

background-repeat:repeat

background-attachment:scroll

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

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

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

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

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

こんな感じです。

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

以上です。

スポンサーリンク

おすすめ記事

フォローする