この記事を読むのに必要な時間は約 11 分です。
トッド
backgroundプロパティには、8つのプロパティが用意されており、
そのほとんどは、要素の背景に画像を使用した場合に指定すべき内容が多く含まれています。
要素の背景色を指定する
background-colorは、要素の背景色を指定したい場合に使用します。
値には、カラーコードを指定します。
.box { background-color: #ff0000;}要素の背景に画像を指定する
background-imageは、要素の背景に画像を指定することができます。
.box { background-image: url( /*画像のurl*/ );}画像だけでなく、背景にストライプやグラデーションをかける時もこちらを使います。ストライプについては、以下から
背景に指定した画像を繰り返す
background-repeatは、要素の背景に指定した画像の繰り返し表示を制御します。
指定できる値には、repeat、space、round、repeat-x、repeat-y、no-repeat、が用意されており、
-
repeat は、背景に指定した画像が繰り返され表示され、領域からはみ出した部分は切り取られます。
-
space は、repeat と同じく繰り返し表示されますが、領域からはみ出さないように調整されて表示されます。
-
round は、繰り返し表示されます。そして、領域内に収まるように自動的に拡大・縮小して表示されます。
-
repeat-x は、水平方向にのみ繰り返しが適応されます。また、repeat no-repeat と、記述した場合と同意です。
-
repeat-y は、垂直方向にのみ繰り返しが適応されます。また、no-repeat repeat と、記述した場合と同意です。
-
no-repeat は、繰り返しません。
.box {
background-image: url(test.png);
background-repeat: round;}上記のように指定された場合の画像test.png は、縦横に繰り返し表示され、要素の領域内に収まるように自動的に拡大・縮小された画像群が表示されます。
背景画像の表示方法
background-attachmentは、ページがスクロールされたときに背景画像として設置された画像がどのように表示されるか？を設定することができます。
値には、scroll、fixed、local、があります。
-
scroll は、背景画像も一緒にスクロールされます
-
fixed は、背景画像はスクロールされない。
-
local は、指定した要素の領域内で fixed。指定した要素にスクロール機能がある場合には scroll。
.box {
background-image: url(test.png);
background-attachment: fixed;}このように指定された場合は、背景画像は固定されスクロールされずに付いてきます。
要素画像の表示位置
background-positionは、背景に表示する画像の位置を決められます。
値には、数値＋単位、top、right、bottom、left、center、が用意されています。
.box {
background-image: url(test.png);
background-repeat: no-repeat;
background-position: right top;}上記コードのように指定した場合は、test.png画像は、指定した要素の右上を基準とした箇所に表示されます。
背景画像の表示サイズ
background-sizeは、指定された要素の領域に対した表示サイズを指定することができます。
値には、数値＋単位、cover、contain、auto、が用意されており、
-
cover は、縦と横の比率を保ったまま指定された要素の領域内を全て覆うように画像が調整されて表示されます。
-
contain は、同じく縦横の比率を保ちます。そして、背景画像が要素の領域内に収まるように調整されます。
-
auto は、自動的に表示サイズが調整されます。
.box {
background-image: url(test.png);
background-repeat: no-repeat;
background-size: cover;}背景画像の基準位置と表示領域
background-originは、要素に表示する背景画像の基準位置を指定します。
一方で、background-clipは、要素背景の表示領域を指定します。
値には双方、border-box、padding-box、content-box、が用意されており、
-
border-box は、要素のボーダーの領域を含む位置から表示します。
-
padding-box は、要素のボーダーの領域を含まない padding 領域の位置から表示します。
-
content-box は、padding 領域すら含まない、コンテンツが表示される位置から表示します。
なお、background-origin の初期値は padding-box で、background-clip の初期値は border-box になります。
origin と clip 双方の意味合いを理解するために以下に3つのパターンを用意しました。
例１、origin = padding-box / clip = border-box
例１、 background-origin の値が padding-box / background-clip の値に border-box を指定した場合です。(双方の初期値)
.box {
background-image: url(test.png);
background-repeat: no-repeat;
background-origin: padding-box;
background-clip: border-box;
}
background-origin は、背景画像を落とす位置を指定する値であり、background-clip は、要素に指定した背景色の表示領域と考えるとわかり易いかもしれません。
例2、origin = padding-box / clip = padding-box
例2、 background-origin の値が padding-box / background-clip の値に padding-box を指定した場合です。
.box {
background-image: url(test.png);
background-repeat: no-repeat;
background-origin: padding-box;
background-clip: padding-box;
}
例１と異なるところは、background-clipで指定する値が padding-box に変わったことで背景色の表示されるエリアがborder領域を含まないようになったところです。
例3、origin = padding-box / clip = content-box
例3、 background-origin の値が padding-box / background-clip の値に content-box を指定した場合です。
.box {
background-image: url(test.png);
background-repeat: no-repeat;
background-origin: padding-box;
background-clip: content-box;
}
やっと、background-origin と background-clip の違いが目に見えて分かるところに来ました。
例２と比較するとわかり易いでしょう。
background-originで指定している背景画像を表示する基準位置は、例１、例２と同じくpadding-boxです。
一方で、background-clipで指定されている表示領域を指す値はcontent-boxです。例のように要素本体にpaddingが指定されている部分と重なる背景画像が少し欠けて表示されている状態になっています。
これが、background-clipの「背景画像の表示領域を指定する」の意味合いになります。
以上、backgroundプロパティについて。
