CSSのbackgroundプロパティで背景にスタイルを適用しよう

2020年8月4日

この記事の目次

backgroundプロパティとは？

backgroundプロパティとは、要素の背景に関するスタイルを適用するCSSプロパティです。

背景色や背景画像、表示位置、サイズ等が設定できます。それぞれ別々に設定もできますが、一括で設定することもできます。

要素の背景に設定できる項目

要素の背景に設定できる項目は以下の項目です。

background-color（背景色）
background-image（背景画像）
background-size（背景サイズ）
background-position（背景画像の表示位置）
background-repeat（背景画像の繰り返し）
background-attachment（スクロールしたときの表示）
background-origin（背景画像の基準位置）
background-clip（背景画像の表示領域）

必要なもののみ記述すればOKです。

では、それぞれ見ていきましょう。

background-color（背景色）

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

カラーネームやカラーコードで指定することができます。

使用例：CSS

p{
  background-color:blue;
}

使用例：ブラウザ

background-color

背景色を設定する際、ユーザーの閲覧環境によって文字色が変わる場合がある為、文字色も併せて設定しておくと良いでしょう。

RGBやRGBAでも設定可能

カラーネーム（blue等）やカラーコード（#000）以外にもRGB（16進数）での設定も可能です。0～255までの値をカンマで区切って指定します。また、RGBAでは、透明度を指定することもできます。それぞれ、以下の様になります。

使用例：CSS

p{
  background-color:rgb(255,255,0);
}
p{
  background-color:rgba(255,255,0,0.2);
}

RGBAの場合は、4つ目の値で0（透明）～1（不透明）を指定します。

使用例：ブラウザ

background-color(RGB)

background-color(RGBA)

background-image（背景画像）

background-imageは、要素の背景に画像を配置することができます。指定する際は、「画像のURI」を指定します。パスの指定方法は、imgタグとは？HTMLで画像を表示してみようを参考にしてみてください。

使用例：CSS

p{
  background-image:url("../images/sample_back.jpg");
  padding:10px 0;
}

使用例：ブラウザ

background-image

指定した要素の幅、高さに合わせて背景画像が設定されます。

ちなみに、background-colorとbackground-imageを両方指定した場合は、background-imageがより前面に表示されますので注意しましょう。

background-size（背景画像のサイズ）

background-sizeは、背景画像のサイズを設定します。画像の縦横比を維持したままサイズ変更したり、%やpx等で指定することができます。

指定できる値が複数あるので、使い分けができるようになりましょう。

使用例：CSS

p{
  background-image:url("../images/sample_back.jpg");
  padding:20px 0;
}
p.sample01{
  background-size:contain;
}
p.sample02{
  background-size:cover;
}
p.sample03{
  background-size:50%;
}
p.sample04{
  background-size:200px 150px;
}

使用例：ブラウザ

sample01

sample02

sample03

sample04

sample01の「contain」は、縦横比を維持したまま拡大、縮小をしてくれます。画像の切り取りは行いません。sample02の「cover」は、containとは違い、要素の領域に空きがないように縦横比を維持したまま拡大、縮小をしてくれます。要素からはみ出した部分は切り取られます。sample03のように値を1つだけ入れた場合は、「幅」の値（高さはauto）となります。sample04は、幅と高さを両方指定しています。この際、画像の縦横比は崩れてしまいますので元々の画像の縦横比に注意しなければなりません。

background-position（背景画像の表示位置）

background-positionは、背景画像の表示位置を設定するプロパティです。要素のボックスを基準として相対的に配置します。

使用例：CSS

p{
  background-color:#F6F6F6;
  background-image:url("../images/sample_back.jpg");
  background-size:50%;
  width:100%;
  height:100px;
}
p.sample01{
  background-position:top right;
}
p.sample02{
  background-position:10% 20%;
}
p.sample03{
  background-position:bottom 10px left 50px;
}

使用例：ブラウザ

sample01

sample02

sample03

それぞれ、要素のtop、left、right、bottomに配置するかを設定できます。また、sample02のように数値で指定することもできます。値を書く順番は決まってはいません。例えば、1つ目にtop、bottomのどちらかを記述すると上辺、もしくは下辺からの距離、つまりX座標を指定できます。その場合、もう一つの値には、left、rightのどちらかの値しか指定できません。こちらが左辺もしくは右辺、つまりY座標の値となります。
sample03では、オフセットを指定しています。「bottomから10px、leftから50px」となります。

background-repeat（背景画像の繰り返し）

background-repeatは、背景画像の繰り返しを設定できるプロパティです。値では、「どの方向にどのように繰り返すのか？」を指定します。また、省略した書き方もあるので併せてみていきます。

使用例：CSS

p{
  background-image:url("../images/sample_back.gif");
  width:200px;
  height:80px;
}

p.sample01{
  background-repeat:repeat;
  /*もしくは*/
  background-repeat:repeat repeat;
}
p.sample02{
  background-repeat:repeat-x;/*repeat-yなら縦方向*/
  /*もしくは*/
  background-repeat:repeat-x no-repeat;
}
p.sample03{
  background-repeat:space;
  /*もしくは*/
  background-repeat:space space;
}
p.sample04{
  background-repeat:round;
  /*もしくは*/
  background-repeat:round round;
}

使用例：ブラウザ

sample01

sample02

sample03

sample04

まず、sample01は、幅と高さそれぞれ表示領域分繰り返し表示します。sample02のように、横方向ならrepeat-x、縦方向ならrepeat-yとそれぞれ設定ができます。no-repeatで繰り返しをしない設定となります。
sample03の「space」だと、表示領域が整数倍の時（例：幅が200pxは設定可。幅が299.9pxのように整数でなければ設定不可）、背景画像をきっちり収まるように配置されます。その際、画像と画像の間隔を拡大してくれます。つまり均等配置をしてくれます。sample01と02では、画像が途中で切れているのに対し、sample03では、きっちり収まっており、間隔が広いことが分かります。
「round」の場合は、間隔はそのままに、画像がきっちり収まるように画像サイズを拡大、縮小します。画像を拡大、縮小するということは解像度に影響が出る為、少し画像が粗くなっていることが分かります。

background-attachment（スクロールしたときの表示）

background-attachmentは、スクロールした時に、背景画像を固定することができるプロパティです。デフォルトは、「scroll」という値です。「fixed」を指定することで背景画像を固定できます。

使用例：HTML

<div>
  <p class="sample01"></p>
  <p class="box"></p>
</div>

使用例：CSS

p.sample01{
  background-image:url("../images/sample_back.jpg");
  background-attachment:fixed;
  height:300px;
}
p.box{
  height:500px;
  background-color:#CCC;
}

使用例：ブラウザ

デモはこちら

画像が表示位置で固定されて、次のコンテンツが重なりながらスクロールされます。
よくパララックスサイトなどで見られる手法ですね。但し、ブラウザやデバイスによっては上手く表示されない場合がありますので注意が必要です。

背景を一括で設定する方法

ここまで、背景に関するプロパティを見てきましたが、一括で設定することでコード量を減らすことができます。以下の様に指定します。

使用例：CSS

p{
  background:blue url(../sample.jpg) no-repeat scroll top left / 300px 100px;
  height:300px;
}

使用例：ブラウザ

background

省略や順番などのルールは特にありませんが、一つだけ注意しなければならないことがあります。それは、background-sizeとbackground-positionです。背景サイズを指定するときは値の前に「/（スラッシュ）」を入れなければなりません。また、background-positionも指定する場合は、背景サイズよりも前に記述しなければなりません。この点には注意しましょう。

background-origin（背景画像の基準位置）

background-originは、背景画像の表示における基準位置を設定するプロパティです。値は3種類で、「padding-box」、「border-box」、「content-box」で初期値はpadding-boxです。では、それぞれの違いを見ていきましょう。

使用例：CSS

p{
  background-image:url("../images/sample_back.jpg");
  border:5px dashed #333;
  width:200px;
  height:100px;
  padding:40px;
}

p.sample01{
  background-origin:padding-box;
}
p.sample02{
  background-origin:border-box;
}
p.sample03{
  background-origin:content-box;
}

使用例：ブラウザ

sample01

sample02

sample03

「padding-box」は、パディングボックス内、つまり余白を含む領域を基準位置とします。「border-box」は、要素のボーダーを含む領域を基準位置とします。「content-box」は、要素の余白を含まない領域を基準位置とします。少し難しく感じるかもしれませんが、ボーダーを含まない「padding-box」、ボーダーを含む「border-box」、ボーダーと余白を含まない「content-box」と覚えましょう。実際には、使用する機会は多くはないと思いますが、このようなプロパティがあるんだということは覚えておきましょう。

ちなみに、background-atattchmet:fixed;を指定している場合、このプロパティは無効となってしまいますので注意しましょう。

background-clip（背景の表示領域）

background-clipは、背景色と背景画像の表示領域を指定するプロパティです。background-originと似ているので違いを理解していきましょう。値は、background-originと同じで、「padding-box」、「border-box」、「content-box」で、初期値はborder-boxです。

使用例：CSS

p{
  background-image:url("../images/sample_back.jpg");
  border:5px dashed #333;
  width:200px;
  height:120px;
  padding:40px;
}

p.sample01{
  background-clip:padding-box;
}
p.sample02{
  background-clip:border-box;
　background-origin: border-box;
}
p.sample03{
  background-clip:content-box;
}