【15-1】background関連のプロパティ（1/4）

ボックスモデル に関係するプロパティを margin, padding, border と見てきましたが、今回から backgroundプロパティ です。

background は要素の背景色・背景画像・背景グラデーションを指定します。
背景画像の場合はその繰り返しかた、位置、サイズなども指定できます。

background は下の右側の図のように、borderまでの範囲がデフォルトです。
ただし background-clipプロパティを使って、この範囲をpaddingまでや、コンテンツボックスまでに狭めることも可能です。

デフォルトの背景の範囲をこのサンプルで確認してみましょう。
borderを白の半透明にしています。
ちゃんとborderの下まで背景色がありますね。

上のサンプルの CSSはこちら。

p#smp0 {
	background-color:#adeefe;  /*背景色を指定しています*/
	border:10px solid rgba(255,255,255,.5);} /*borderを白の半透明に*/

background は昔からあるプロパティですが、CSS3から新しい値やプロパティが追加されたりして、盛りだくさんなので記事を5回に分けます。

【15-1】background関連のプロパティ（1/4）　←今日はココ

backgroundのプロパティと値の一覧／background-color／background-image／background-repeat／background-attachment

【15-2】background関連のプロパティ（2/4　background-position）

background-position

【15-3】background関連のプロパティ（3/4 background-size）

background-size

【15-4】background関連のプロパティ（4/4 clip と origin）

background-clip／background-origin

【15-5】backgroundのショートハンド まとめ

たくさんあるbackgroundのプロパティを一括でまとめられます

本日のINDEX

1. backgroundのプロパティと値の一覧
2. background-colorプロパティ
3. background-imageプロパティ
   1. 複数の画像を「,（カンマ）」で区切って指定
   2. 背景グラデーションを指定するのもコレ
4. background-repeatプロパティ
   1. 画像を複数使った場合の background-repeat の指定は？
5. background-attachmentプロパティ
   1. 画像を複数使った場合の background-attachment の指定は？

backgroundのプロパティと値の一覧

まずは background関連の全プロパティと値の一覧です。

プロパティ	概要	値
background-color	背景の色	CSSの色指定（カラーネーム、RGB(16進数,10進数)、HSL）、 キーワード transparent(透明)、currentColor(文字色) デフォルトはtransparent
background-image	背景画像	url("画像のURL") で指定。デフォルトはnone
background-repeat	画像の繰り返しかた	repeat-x, repeat-y, repeat, no-repeat, space, round デフォルトはrepeat
background-attachment	スクロール時の背景画像の挙動	fixed, scroll, local　デフォルトはscroll
background-position	画像表示位置	数値（pxやemなどの単位を付けて）、%、 キーワード top, right, bottom, left, center デフォルトは「0 0」
background-size	画像表示サイズ	数値（pxやemなどの単位を付けて）、%、 キーワード auto, contain, cover デフォルトはauto
background-clip	背景の範囲	キーワード border-box, padding-box, content-box デフォルトはborder-box
background-origin	画像配置の基準位置	キーワード border-box, padding-box, content-box デフォルトはborder-box
background	ショートハンド プロパティ	値を半角スペースで区切ってまとめる。 sizeはpositionとセットで「position/size」という順番でスラッシュで区切って。originはclipの前。それ以外は順不同

これらのプロパティを上から順番に紹介していきます。今回は1〜4番目までね。

background-colorプロパティ

background-colorプロパティは、要素の背景色を指定します。

background-color の値
CSSの色指定	カラーネーム、RGB(16進数,10進数)、HSLなどのCSSの色指定で。 CSSの色指定については、 【8】CSSの「色」と「透明度」の指定   [14-4] 色指定について（16進数, 色名, 10進数, HSL, accessibility） に詳しく書いていますのでご覧ください。
transparent	デフォルト。透明。rgba(0,0,0,0)と同じ。 background-color を指定していなければ背景色は透明になります
currentColor	文字色（colorプロパティで指定された色）

値の継承	なし	適用できる要素	全部

サンプルで色指定やキーワード値を確認してみます。
5番目の transparent は透明色（デフォルト）、6番目の currentColor は文字色です。

background-color: #fff5ee

background-color: darkkhaki;

background-color: rgba(156,100,210,0.5)

background-color: hsla(181, 100%, 45%, 0.2)

background-color: transparent

background-color: currentColor

上のサンプルの HTMLはこちら。

<div id="smp2">
<p>background-color: #fff5ee;</p>
<p>background-color: darkkhaki;</p>
<p>background-color: rgba(156,100,210,0.5);</p>
<p>background-color: hsla(181, 100%, 45%, 0.2);</p>
<p>background-color: transparent;</p>
<p>background-color: currentColor;</p>
</div>

CSSはこちら。

div#smp2 {margin:0;}
div#smp2 p {margin:1em 0; padding:0.3em 1em; background-color:#fff5ee;}
div#smp2 p:nth-child(2) {background-color:darkkhaki;}
div#smp2 p:nth-child(3) {background-color:rgba(156,100,210,0.5);}
div#smp2 p:nth-child(4) {background-color:hsla(181, 100%, 45%, 0.2);}
div#smp2 p:nth-child(5) {background-color:transparent;}
div#smp2 p:nth-child(6) {background-color:currentColor;}

キーワード currentColor はその要素の文字色。サンプルでは6番目の指定。文字色は #666 です。
文字色と背景色が同じなので、文字が読めなくなるけど、この値って使い道はあるんだろうか？ まいっか（笑）

ちなみに、サンプルで「p:nth-child(2)」というセレクタを使っていますが、これは「2番目のp要素」をセレクタにする という擬似クラスです。
詳しくは【3】id とか classって何？（セレクタの「種類」を知っておこう）をご覧ください。

background-imageプロパティ

background-imageプロパティは、背景に画像やグラデーションを指定したいときに使います。

background-image の値
none	デフォルト。背景画像無し background-image を指定していなければ画像やグラデーションは無しになります
url("画像のURL")	画像のURLを指定します
linear-gradient() radial-gradient()	グラデーションの指定を ()内に書きます linear-gradientは線形、radial-gradientは円形グラデーションです

値の継承	なし	適用できる要素	全部

背景画像を指定する場合は、画像のURLを指定します。相対でも絶対パスでもOK。
サンプルを見てみましょう。

background-image:url(images/bg01.jpg)

上のサンプルの HTMLはこちら。

<div id="smp3">
background-image:url(images/bg01.jpg)
</div>

CSSはこちら。

div#smp3 {
	margin:0;
	padding:2em;
	background-color:#fff5ee;  /*背景色も指定しています*/
	background-image:url(images/bg01.jpg);}

ここで使っている画像 bg01.jpg はコレ。

background-color（背景色）も指定しています（CSSの4行目）が、background-image で画像を指定すると、レイヤー構造的に背景色の上に画像が乗っかるカタチになります。背景色は、必ず一番下に敷かれるってこと。

複数の画像を「,（カンマ）」で区切って指定

CSS3から、background-image で複数の画像を指定できるようになりました。
画像のURLを「,（カンマ）」で区切って指定します。
このとき書き順に注意が必要です。先に書いた画像が上に乗ります。
例えば background-image: url(images/A.png), url(images/B.png), url(images/C.jpg) と書いたなら、A.png が1番上、その後 B.png 、C.jpg の順番です。

複数の画像を背景に指定

上のサンプルの HTMLはこちら。

<div id="smp3-1">
複数の画像を背景に指定
</div>

CSSはこちら。

div#smp3-1 {
	margin:0;
	padding:2em;
	background-color:#fff5ee;  /*背景色も指定しています*/
	background-image:url(images/bg02.png),url(images/bg01.jpg);}

ここでも背景色 background-color は、一番下に敷かれてますね。見えてないから。
背景に複数の画像を使うなら、CSS3に対応していない古いブラウザのために、background-color も指定しておこう。じゃないとまっ白ののっぺらぼうな背景になるから。

bg02.png はこちらです。

背景グラデーションを指定するのもコレ

CSS3から、background-image で背景にグラデーションも指定できるようになりました。
グラデーションは、CSSでは「固有のサイズを持たない画像」として扱われるのだそうです。
（参考：gradient - CSS | MDN）

グラデーションの指定については、こちらで詳しく取り上げていますのでご覧ください。
線形グラデーション：[13-3] サイト背景にCSS3で線形グラデーションをつけよう (CSS使用)
円形グラデーション：[18-4] CSS3で、円形（放射）グラデーションを作ろう (radial-gradient)

サンプルです。

線形グラデーションを背景に指定

上のサンプルの HTMLはこちら。

<div id="smp3-2">
線形グラデーションを背景に指定
</div>

CSSはこちら。

div#smp3-2 {
	margin:0;
	padding:2em;
	background-color:#9c0;  /*背景色も指定しています*/
    background-image:linear-gradient(#ff9, #9c0);

ここでも背景色 background-color は、グラデーションより下ですね（見えてないから）。
背景にグラデーションを使う場合、CSS3に対応していない古いブラウザで見ている人のために、background-color も指定しておくように。じゃないとまっ白ののっぺらぼうな背景になるから。

background-repeatプロパティ

background-repeatプロパティは、背景に画像を指定したときの、画像の繰り返しかた（repeat = リピート）を指定します。
値はキーワードだけ。CSS3から新しく「space」「round」というキーワードが加わりました。

background-repeat の値
repeat	デフォルト。縦横（x, y軸とも）に繰り返します background-repeat を指定していなければ、画像は横方向・縦方向ともに繰り返します
repeat-x	x方向（横）にだけ繰り返す
repeat-y	y方向（縦）にだけ繰り返す
no-repeat	繰り返さない。画像を1個だけ表示します
space	領域内にピッタリ収まるようにスペースを空けて調整しながら、縦横（x, y軸とも）に繰り返す
round	領域内にピッタリ収まるようにサイズ調整しながら、縦横（x, y軸とも）に繰り返す

値の継承	なし	適用できる要素	全部

サンプルでキーワードを順に見てみましょう。使用している画像はコレ です。

background-repeat: repeat　縦横に繰り返します

background-repeat: repeat-x　x方向（横）にだけ繰り返します

background-repeat: repeat-y　y方向（縦）にだけ繰り返します

background-repeat: no-repeat　繰り返し無し

上のサンプルの HTMLはこちら。

<div id="smp4">
<p>background-repeat: repeat　縦横に繰り返します</p>
<p>background-repeat: repeat-x　x方向（横）にだけ繰り返します</p>
<p>background-repeat: repeat-y　y方向（縦）にだけ繰り返します</p>
<p>background-repeat: no-repeat　繰り返し無し</p>
</div>

CSSはこちら。

div#smp4 {margin:0;}
div#smp4 p {
	margin:1em 0;
    padding:2em;
    background-color:#fff5ee;  /*背景色も指定しています*/
	background-image:url(images/bg03.gif)} /*背景画像を指定しています*/
div#smp4 p:nth-child(2) {background-repeat: repeat-x;}
div#smp4 p:nth-child(3) {background-repeat: repeat-y;}
div#smp4 p:nth-child(4) {background-repeat: no-repeat;}
/*最初の background-repeat: repeat は特に指定していません。デフォなので*/

CSS3から新しいキーワード「space」「round」が加わりました。
spaceは、領域内にピッタリ収まるようにスペースを空けて調整され、
roundは、領域内にピッタリ収まるようにサイズ調整されます。
サンプルを見てみましょう。

background-repeat: space

background-repeat: round

上のサンプルの HTMLはこちら。

<div id="smp4">
<p>background-repeat: space</p>
<p>background-repeat: round</p>
</div>

CSSはこちら。

div#smp4_2 {margin:0;}
div#smp4_2 p {
	margin:1em 0;
    padding:2em;
    background-color:#fff5ee;  /*背景色も指定しています*/
	background-image:url(images/03.gif)} /*背景画像を指定しています*/
div#smp4_2 p:nth-child(1) {background-repeat: space;}
div#smp4_2 p:nth-child(2) {background-repeat: round;}

どうでしょう？　Chrome（ver.46）, Opera（ver.25）は対応しているようです。

画像を複数使った場合の background-repeat の指定は？

画像を複数使った場合の background-sizeの指定は、それぞれの画像の繰り返しかたをカンマで区切って指定することができます。
順序はbackground-imageで指定したのと同じく、上になる画像から指定します。

上の画像はno-repeat、下はrepeat

上のサンプルの HTMLはこちら。

<div id="smp4_3">
複数の画像を背景に指定
</div>

CSSはこちら。

div#smp4_3 {
	margin:0;
	padding:3em 2em;
	background-color:#fff5ee;
	background-image:url(images/bg02.png),url(images/bg03.gif);
    background-repeat:no-repeat, repeat;}

background-attachmentプロパティ

background-attachmentプロパティは、スクロール時の背景画像の挙動を指定します。
attachment は吸着って意味。背景領域への画像のくっつきかたってことです。

background-repeat の値
fixed	描画領域に対して背景画像をそのままの位置で固定
scroll	デフォルト。背景画像を一緒にスクロールさせる background-attachment を指定していなければ、通常どおり背景画像も一緒にスクロールします
local	子要素に指定すると背景画像がテキストと一緒にスクロールする

値の継承	なし	適用できる要素	全部

サンプルを見てください。

background-attachment: fixed　固定

background-attachment: scroll　スクロール

background-attachment: local　ローカル

まず、このページ全体をスクロールしてみてください。
fixedは、テキストだけ動いて、背景画像はブラウザウィンドウに固定されている状態です。
scrollとlocalの背景画像は、他の要素と同じようにテキストも背景画像も一緒に動きます。

では次に、小さいスクロールバー3個をそれぞれ動かしてみてください。
fixedは、ブラウザによって挙動が違うようで、FirefoxとOperaでは、ここでも背景画像は固定されテキストしか動きません。Chromeではテキストと背景画像が逆の向きにスクロールするようです。fixedが子要素の時はブラウザによって挙動が違うようでやっかいですね。

次のscrollですが、背景画像が固定されてスクロールしなくなってます。これはscrollが子要素のときに起こる現象です。子要素にscrollを指定するとfixedのような挙動になります。

新しいlocalは、子要素に指定すると背景画像はテキストと一緒にちゃんとスクロールします。
ちゃんとスクロールすると便利な時もあります。スクロールさせたコラムとかで、ロゴやタイトルを背景画像で配置するなどしたら、固定で残っていたら困るもんね。そんなときには local で。

値の使い方のまとめです。
●サイト全体の背景画像を固定したいときはfixedを使う。
（attachmentを指定しなければスクロール。scrollがデフォルト値なので）
●サイト内の子要素にスクロールバーを出す場合、背景画像もスクロールさせたければlocalを使う。
（attachmentを指定しなければ背景画像は固定。scrollがデフォルト値で子要素の時は固定だから）

上のサンプルの HTMLはこちら。

<div id="smp5">
<p>background-attachment: <b>fixed</b>　固定<br><br><br><br><br></p>
<p>background-attachment: <b>scroll</b>　スクロール<br><br><br><br><br></p>
<p>background-attachment: <b>local</b>　ローカル<br><br><br><br><br></p>
</div>

CSSはこちら。

div#smp5 {margin:0;}
div#smp5 p {
	margin:1em 0;
    padding:2em;
    height:1.8em;  /*スクロールさせたいので高さ指定しています*/
    overflow-y:scroll;  /*スクロールバーを表示しています*/
    background-color:#fff5ee;  /*背景色も指定しています*/
	background-image:url(images/03.gif)} /*背景画像を指定しています*/
div#smp5 p:nth-child(1) {background-attachment:fixed;}
div#smp5 p:nth-child(2) {background-attachment:scroll;}
div#smp5 p:nth-child(3) {background-attachment:local;}

＊メモ＊
background-attachment: fixed を使って、Webページ全面に背景を固定し、background-size: cover で背景画像をウィンドウサイズにフィットさせる指定は、PCブラウザなら何も問題ないのですが、iOS Safari だと background-attachment: fixed が効かない問題が起きます。
これを解決するために、スマホの場合だけ擬似要素「::before」でブロック要素を作って背景を指定する方法があります。
こちら↓に詳しいソースを書いておきましたので、見てみてください。
background-attachment: fixed がスマホで効かない問題は ::before で解決！ | ＊Web Design 覚え書き＊

画像を複数使った場合の background-attachment の指定は？

画像を複数使った場合の background-attachmentの指定は、 それぞれの画像のアタッチメントをカンマで区切って指定することができます。
順序はbackground-imageで指定したのと同じく、上になっている画像から指定します。

サンプルを見てみましょう。

background-attachment: scroll,fixed

background-attachment: local,scroll

background-attachment: scroll,scroll

background-attachment: local,local

上のサンプルの HTMLはこちら。

<div id="smp5_2">
<p>background-attachment: <b>scroll,fixed</b><br><br><br><br><br></p>
<p>background-attachment: <b>local,scroll</b><br><br><br><br><br></p>
<p>background-attachment: <b>scroll,scroll</b><br><br><br><br><br></p>
<p>background-attachment: <b>local,local</b><br><br><br><br><br></p>
</div>

CSSはこちら。

div#smp5_2 {margin:0;}
div#smp5_2 p {margin:1em 0; padding:2em; height:1.8em; background-color:#fff5ee;
	overflow-y:scroll;
	background-image:url(images/bg02.png), url(images/bg03.gif);
	background-repeat:no-repeat, repeat;}  /*上の画像だけno-repeat*/
div#smp5_2 p:nth-child(1) {background-attachment:scroll,fixed;}
div#smp5_2 p:nth-child(2) {background-attachment:local,scroll;}
div#smp5_2 p:nth-child(3) {background-attachment:scroll,scroll;}
div#smp5_2 p:nth-child(4) {background-attachment:local,local;}

fixed ならサイト全体では固定になり、子要素ではブラウザによって違う。
scroll ならサイト全体ではスクロールし、子要素では固定。
子要素の中でも背景をスクロールさせたければ local を使う。ってことです。

次回予告

次回は background-position について。
background-position は、背景画像の表示位置を指定します。
キーワードで簡単に指定したり、マイナスの数値で位置指定することもできます。
複数の画像を別々に位置指定することも可能です。