background (背景)


background

 background属性は背景を設定します。これは、次のような文法に従います。パラメータは全部指定する必要はないです。順番は必ずしもこの通りでなくてもよさそうです。

background: color position/size repeat origin clip attachment image|initial|inherit;

 こんなにいろいろ設定する必要はあまりないので、個別の属性を使ったほうがかえって便利です。

<style>
#div1 {
  background: beige;
}
</style>

 

background-color

 背景色を設定するには、background-colorを使用します。この属性のパラメータはカラーコード(#rrggbb)またはカラー名です。

<style>
#div2 {
  background-color: silver;
}
</style>

 

background-image

<style>
#div3 {
  background-image: url("back-pink.png");
}
</style>

 

背景の位置 (background-position, background-repeat)

 背景画像の位置を指定するには、を使用します。デフォルトでは、背景画像は繰り返しモードになっているので、background-repeat属性も併用して繰り返しを抑制します。

<style>
#div4 {
  background-repeat: no-repeat;
  background-position: center;
  background-image: url("back-pink.png");
}
</style>

 background-positionは次のような値を取ることができます。

意味
left top
left center
left bottom
right top
right center
right bottom
center top
center center
center bottom
左上
左中央
左下
右上
右中央
右下
中央上
中央 (centerだけでもOK)
中央下
x% y%画像の左上の頂点の座標を領域の相対位置%で指定。
xpos ypos画像の左上の頂点の座標を領域の絶対位置で指定。
initial初期値(デフォルトは左上)
inherit親の設定を継承

 background-repeatは次のような値を取ることができます。

意味
repeat上下左右に繰り返し
repeat-x左右に繰り返し
repeat-y上下に繰り返し
no-repeat繰り返しなし
initial初期値(デフォルトはrepeat)
inherit親からの継承値

 

背景の起点 (background-origin)

 background-origin属性は背景の起点を指定します。起点とは、領域の端、境界線の端、余白の端のどれかです。

 下のサンプルはbackground-originがborder-boxなので境界線の外側から画像が始まっているため、見た目少し縦長になっています。

<style>
#div5 {
  background-repeat: no-repeat;
  background-position: left;
  background-origin: border-box;
  background-image: url("back-pink.png");
}
</style>

 下のサンプルはbackground-originがcontent-boxなので境界線の内側から画像が始まっているため、元々の画像がそのまま表示されています。

<style>
#div6 {
  background-repeat: no-repeat;
  background-position: left;
  background-origin: content-box;
  background-image: url("back-pink.png");
}
</style>

 

背景の範囲を制限

 background-clipを設定すると背景の範囲を制限できます。下のサンプルは余白に背景色を表示しないようにするものです。

<style>
#div7 {
  padding: 10px;
  background-color: yellow;
  background-clip: content-box;
}
</style>

 background-clipは以下の値を取ることができます。

意味
border-box境界線も含む領域全体(デフォルト)
padding-box境界線を除く領域全体
content-box境界線と余白を除く領域全体
initial初期値(デフォルトはborder-box)
inherit親からの継承値

 

背景のスクロールの有無

 background-atachmentはコンテナとなる親のオブジェクトがスクロールしたとき、背景画像もスクロールするかどうかを指定します。

サンプル

background-atachment属性は以下の値を取ります。

意味
scroll親のコンテナと一緒にスクロールする。
fixed親のコンテナと一緒にスクロールしない。
localコンテナの要素と一緒にスクロールする。
initial初期値(デフォルトはscroll)
inherit親からの継承値

色の傾斜 (グラデーション)

 背景色は単色だけでなく、グラデーションも付けることができます。グラデーションの方法には線形(linear-gradient)と円形(radical-gradient)があります。

linear-gradient

 線形グラデーションを使うには、background属性でlinear-gradient関数を指定します。これは、次のような文法で定義されます。directionは方向でto left, to right, to bottomなどや角度を指定します。color-stopは複数指定でき、色の名前やコードを指定します。

background: linear-gradient(direction, color-stop1, color-stop2, ...);

 directionは省略可能でその場合は上から下への変化になります。(下の例)

<style>
#grad_lin0 {
  width: 200px;
  height: 160px;
  border: solid thin black;
  background: linear-gradient(black, white);
}
</style>

 次の例は右から左への変化で、directionに"to left"を指定しています。

<style>
#grad_lin1 {
  width: 200px;
  height: 160px;
  border: solid thin black;
  background: linear-gradient(to left, red, yellow);
}
</style>

 3色以上の色も設定できます。

<style>
#grad_lin2 {
  width: 200px;
  height: 160px;
  border: solid thin black;
  background: linear-gradient(to right, red, yellow blue);
}
</style>

 下の例は角度を指定したものです。

<style>
#grad_lin3 {
  width: 200px;
  height: 160px;
  border: solid thin black;
  background: linear-gradient(45deg, black, white);
}
</style>

 

radical-gradient

 radial-gradient関数を使うと同心円まわりの色を変化させることができます。文法は下のように定義されていますが、色だけ指定すると領域の中心点周りに色が変化します。

background: radial-gradient(shape size at position, start-color, ..., last-color);
<style>
#grad_r {
  width: 200px;
  height: 160px;
  border: solid thin black;
  background: radial-gradient(red, yellow);
}
</style>
<div id="grad_rad0"></div>

 色は複数個指定できます。同心円の幅も指定できます。

<style>
#grad_rad1 {
  width: 200px;
  height: 160px;
  border: solid thin black;
  background: radial-gradient(red 5%, yellow 20%, green);
}
</style>
<div id="grad_rad1"></div>

 上の例は、矩形の形に合わせて同心円は楕円になっていました。これは形 (circle) を指定することで、円にすることができます。

<style>
#grad_rad2 {
  width: 200px;
  height: 160px;
  border: solid thin black;
  background: radial-gradient(circle, red 5%, yellow 20%, green);
}
</style>
<div id="grad_rad2"></div>

 同心円の中心を真ん中以外にもできます。下の例は、右側に中心がありますが、左側にするときは farthest-side の代わりに closest-side を指定します。

<style>
#grad_rad3 {
  width: 200px;
  height: 160px;
  border: solid thin black;
  background: radial-gradient(farthest-side at 80% 80%, red, white);
}
</style>
<div id="grad_rad3"></div>

 

 

このページの先頭へ戻る