【CSS入門】backgroundに関する全てをマスター【size・position・imageなど 】

この記事では背景を指定するCSSのbackgroundに関連するプロパティについて解説します。

backgroundとは？

個々の背景プロパティを一括指定できるショートハンドです。

CSS

background: 背景色 背景画像 リピート 開始位置;
 
background: #000 url(images/bg.gif) no-repeat top right;

プロパティの値は順不同で半角スペース区切りで指定でき、省略した値はそのプロパティのデフォルト値が適用されます。

この記事内にあるbackground-sizeだけはショートハンドには書けないので注意してください。

backgroundプロパティ詳細

backgroundで使用するプロパティは以下の通りです。

background-color

背景色を指定します。

background-colorに指定できる値は以下の通りです。

実際に使用するときは以下のように記述します。

HTML

<div class="BOX-A">BOX-A</div>

CSS

.BOX-A{
	width: 300px
	height: 200px;
    background-color: #9bc0e0;
}

background-image

背景画像のURLを指定します。

background-imageに指定できる値は以下の通りです。

body全体に小さい背景画像を繰り返しで配置したいときは以下のように記述するだけでいいのですが、

CSS

.body{
  background-image: url(images/men.jpg);
}

特定の要素にのみ背景画像を配置したいときは、以下のようにwidth(幅)やheight(高さ)も一緒に記述します。

HTML

<div class="BOX-A"></div>

CSS

.BOX-A{
  width: 300px;
  height: 200px;
  background-image: url(images/men.jpg);
}

background-repeat

background-imageで指定した背景画像の繰り返し方法を指定します。

background-repeatに指定できる値は以下の通りです。

実際に使用するときは以下のように記述します。

CSS

body{
  background-image: url(images/men.jpg);
  background-repeat: no-repeat;
}

background-position

background-imageプロパティで指定した背景画像の表示開始位置を指定します。

background-positionに指定できる値は以下の通りです。値の左側が垂直方向の位置で、右側が水平方向の位置を指定し、%かtopなどの英語で表記します。

実際に使用するときは以下のように記述します。

CSS

body{
  background-image: url(images/men.jpg);
  background-repeat: no-repeat;
  background-position: top right;
}

background-size

背景画像のサイズを指定します。このプロパティだけbackgroundショートハンドにはかけません。

background-sizeに指定できる値は以下の通りです。

実際に使用するときは以下のように記述します。

HTML

<div class="BOX-A"></div>

CSS

.BOX-A{
  background-image: url(images/men.jpg);
  background-repeat: no-repeat;
  background-size: cover;
}

幅と高さを指定したい時は値の左側で画像の幅、右側で画像の高さを指定します。pxではなく%で指定の場合は、表示領域に対しての表示になります。

複数の背景の利用方法

Webサイトを制作していると複数の背景を配置したい時があると思いますが、各レイヤーをカンマで区切る事だけの簡単な構文で可能です。

ショートハンドプロパティも使えますけど、以下のようにバラして書いた方が見やすいです。

CSS

.BOX-A{
  width: 500px;
  height: 500px;

  background-image:
    url("images/logo.gif"), /* 最前面の背景レイヤーの背景画像 */
    url("images/baby.jpg");
    url("images/bg.jpg");

  background-repeat:
    no-repeat, /* 最前面の背景レイヤーに対応 */
    no-repeat,
    repeat;

  background-position:
    top left, /* 最前面の背景レイヤーに対応 */
    center center,
    top left;

  background-size:
    auto, /* 最前面の背景レイヤーに対応 */
    auto,
    cover;
}

まとめ

この記事に書かれていることで、特に覚えておいて欲しいことは以下の2点です。

CSS関係の記事は他にも書いているので、宜しければそちらもチェックしてみてください。