background - 背景の設定をまとめて指定する

投稿日:2016/02/22 / 更新日:2016/02/22

スタイルシートのbackgroundは、背景関連のプロパティをまとめて指定できるプロパティです。

サンプルコード

下記は、backgroundを用いて、「背景画像ファイルのパス(background-image)」「背景色(background-color)」「起点(background-position)」「サイズ(background-size)」「リピートの方向(background-repeat)」の4つのプロパティをまとめて指定するサンプルコードです。

body {
	background: url( "/character.png" ) 0 100px / 75px 76px repeat-x #D36015 ;
}

デモ

スタイルシートのbackgroundを指定した例です。背景画像(/character.png)、背景色(#D36015)、背景画像の位置(0 100px)、背景画像のタイルサイズ(75px 76px)、リピートの方向(repeat-x)が反映されているのを確認して下さい。

RUN
HTML
CSS
JavaScript

body { background: url( "/character.png" ) 0 100px / 75px 76px repeat-x #D36015 ; }

値の指定

backgroundで使用できるプロパティの一覧です。これらのプロパティの値を、backgroundの値にスペースで区切ってまとめて指定します。位置とサイズの指定については、決まりがあるので次章をご参考下さい。リンクをクリックすると、そのプロパティの詳細ページに移動します。

項目	説明
background-image	背景画像を指定する。
background-position	背景画像の位置を調整する。
background-size	背景画像のサイズを指定する。
background-repeat	背景画像の繰り返し表示を調整する。
background-attachment	スクロール時の背景画像の挙動を指定する。
background-origin	背景画像の起点を指定する。
background-clip	背景が及ぶ範囲を指定する。
background-color	背景色を指定する。

ルール

backgroundの基本的なルールをまとめました。

順番

値は順不同で指定できます。例えば、画像ファイルと色を指定したい時、次のどちらでも結果は同じです。

#element-1 {
	background: url( "/character.png" ) #D36015 ;
}

#element-2 {
	background: #D36015 url( "/character.png" ) ;
}

位置とサイズ

1点だけ守らなければいけないのが、位置(background-position)、またはサイズ(background-size)を指定する時です。この2つを利用する時は、位置、サイズの順でセットにして、スラッシュ(/)で区切らないと文法エラーを起こしてしまいます。次の例を見て下さい。

/* 正しい */
#element-1 {
	background: url( "/character.png" ) top right / 75px 76px repeat-x #D36015 ;
}

/* 間違い */
#element-2 {
	background: url( "/character.png" ) 75px 76px / top right repeat-x #D36015 ;
}

/* 間違い */
#element-3 {
	background: 75px 76px url( "/character.png" ) top right repeat-x #D36015 ;
}

/* 正しい */
#element-4 {
	background: url( "/character.png" ) repeat-x #D36015 top right / 75px 76px ;
}

省略

backgroundには、全ての値を指定する必要はありません。省略されたプロパティには、そのプロパティのデフォルト値が適用されます。例えば、下記はよく使う、背景画像の指定方法です。この時、背景以外の全てのプロパティには、各プロパティの初期値が値としてセットされます。

background: url( "/background.png" )

例えば、下記の場合、先に指定したbackground-repeatプロパティの値(no-repeat)は、後に指定したbackgroundの影響で、初期値のrepeatに書き換えられてしまいます。何故なら、backgroundでbackground-repeatプロパティが省略されているため、自動的に初期値(repeat)がセットされるからです。

body {
	background-repeat: no-repeat ;
	background: url( "/background.png" ) ;
}

ブラウザのサポート

2016年7月現在の、ブラウザのサポート状況は次の通りです。全ての主要ブラウザで、ベンダープレフィクスなど気にすることなく利用できます。

Chrome
●
-
時期不明
Firefox
●
-
時期不明
Safari
●
-
時期不明
Ie
●
-
時期不明
Edge
●
-
時期不明
Opera
●
-
時期不明
Safari(iOS)
●
-
時期不明
Ie Mobile
●
-
時期不明
Chrome
●
-
時期不明
Android
●
-
時期不明
FF Mobile
●
-
時期不明
Opera Mobile
●
-
時期不明