CSSの背景画像指定！backgroundの使い方とプロパティの説明書

2019年9月15日

CSSのbackgroundってプロパティ指定が沢山あって難しい〜！誰かわかりやすく説明してくれよ。

backgroundはプロパティも多く、使う頻度がとても多いので、とても重要だね！

今回はそんなbackgrouondを「説明書のように」徹底的に解説するのでブックマークして、忘れたら何度も見直して理解しよう！

SCSSで背景画像を指定するbackgroundのプロパティの種類

background	背景をショートハンドでまとめて指定
background-color	背景に色を指定
background-image	背景に画像を指定
background-repeat	背景画像の繰り返し指定
background-position	背景画像の位置を指定
background-size	背景画像のサイズを指定
background-origin	背景を配置する基準位置（基点）を指定
background-clip	背景の描画領域を指定
background-attachment	画面スクロールに応じた背景画像の固定・移動を指定

backgroundは基本的に「要素の背景に色を設定したりイメージ画像を入れたり」できるプロパティで、backgroundから派生する８つの種類のプロパティがある。

background自体はそれら８つのプロパティを一気にまとめて（ショートハンドで）指定することができるプロパティであり、単体でもその他の８つのプロパティの「値」を入れることで、その他のプロパティと同様に機能する。

background-colorプロパティの使い方

背景に色を入れるプロパティで（backgroundでも指定可）値には、色を指定する記述で#ff9900といったHEXの色コードや、色名（例：red）で指定したり、透明度をつけたい場合は、rgba(255, 100, 100, 0.5);といった形式でも色指定することもできる。

cssの記述例

.test{
  background-color: #ff9900;
}

HTMLの記述例

<div class="test">
 背景の色が変わります。
</div>

ブラウザ表示

背景の色が変わります。

※当記事では説明をシンプルに見やすくする為適宜paddingやborderなどを入れて表示しています

透明色をつけるrgbaの指定の場合

透明度を指定できるrgbaの記法を使うことで、背景色に透明度をつける事ができる！

cssの記述例

.test{
  background-color: rgba(255, 153, 0, 0.2);
}

HTMLの記述例

<div class="test">
 背景の色が透明のオレンジに変わります。
</div>

ブラウザ表示

背景の色が透明のオレンジに変わります。

RGBAとは

RGBAとは光の3原色と言われる「RGB（R:レッド G:グリーン B:ブルー）」に透明度を表す「A（アルファ）」の数値を入れるものであり、RGBは0~255の数値を入れ、Aは0~1.0（0%~100%)の少数第一位までの数値で透明度を指定する。

RGBの0~255の数値は、「0」が最も弱い光で「255」が最も強い光を表す。例えばRGBの３つの光が全部255であれば「白色」になり、全部0であれば「黒色」になる。

rgba(255, 255, 255, 0.5);この場合「白色で透明度が50%」を表す

background-imageプロパティの使い方

background-imageは背景にイメージ画像を表示できるプロパティで、background-image:url("img/01.jpg");のように記述する。

urlの中はhtmlから見て画像が保存されているフォルダまでの相対パス（もしくは絶対パス）を記述して、ファイルを指定。

たとえばこんな野球のボールの写真（ball.jpg サイズ150px × 150px）を背景に設定する場合の記述としては

cssの記述例

.test{
  background-image: url("ball/jpg");
}

HTMLの記述例

<div class="test">
 背景にボールの写真が入ります
</div>

ブラウザ表示

背景にボールの写真が入ります

このように、150px四方の写真が横に繰り返されて表示されているが、背景写真は「クラスtestのdivのボックス」の高さ分までしか見えない。これが背景の基本的な表示の仕方である。

では「クラスtestのdiv」の高さを300pxにしてみるとどうなるか？

背景にボールの写真が入ります

そう、このように写真は「縦にも横にも繰り返し表示」されている。高さが300pxに伸びたので、ちょうど縦に２枚分写真が並んで見えることになる。

つまり背景写真の表示の仕組みとして（次に説明する「background-repeat」で指定しない限りは）デフォルトで画像が縦にも横にも繰り返し表示され、親要素のボックスサイズの範囲内で表示される仕組みなのだ。

背景画像を複数指定する方法

ひとつのボックスに対して、背景画像はCSS3から複数指定する事が可能になった。

基本的に複数枚の背景画像を重ねる時の書き方は、セレクタ {background-image: 背景1, 背景2, 背景3;}のように「,」カンマ区切りで記述する（backgroundでも可）。

具体的に詳しいやり方や、注意点については次の記事に詳しく書いているので、見てみよう！

CSSで複数の背景画像指定して重ねる方法

background-repeatプロパティの使い方

background-repeatは背景画像の繰り返し指定

前述したとおり、背景画像はデフォルトでは親ボックスの範囲内で繰り返し表示される。これを制御するプロパティがbackground-repeatなのである。

値	意味
repeat	縦にも横にも繰り返し表示（初期値）
repeat-x	x軸方向（横方向）にのみ繰り返し表示
repeat-y	y軸方向（縦方向）にのみ繰り返し表示
no-repeat	繰り返さない

このように繰り返すか、横方向だけに繰り返すか、縦方向だけに繰り返すか、繰り返さないかの４通りだけ。何も指定しなければ「repeat（繰り返す）」が初期値で適用される。

さきほどの背景画像を繰り返さないに指定した例を見てみよう！

cssの記述例

.test{
  background-image: url("ball/jpg");
  background-repeat:no-repeat;
}

HTMLの記述例

<div class="test">
 背景にボールの写真が「繰り返さず」に入ります
</div>

ブラウザ表示

背景にボールの写真が「繰り返さず」に入ります

background-positionプロパティの使い方

背景画像の表示位置を指定する

background-positionは背景画像の表示位置を指定するものであり、デフォルト（指定を省略した場合の初期値）は「left top（左上）」の位置となっている。プレビュー (新しいウィンドウで開きます)

background-position:横方向の位置縦方向の位置;

このように指定し、順番は「横方向の位置」「縦方向の位置」の順番で記述するルールになっている。

background-positionの指定の仕方にはいくつかあるので、一覧で見てみよう

	表記	例
横方向の位置	left / center / right	`right top`
縦方向の位置	top / center / bottom	`right top`
px指定（左上基準）	30px 50px	`30px 50px`
%指定（左上基準）	50%	`50% 50%`
基準位置の指定	right left top bottom ※値の前に記述	`right 10px bottom 30px`

pxや%など具体的な数値で指定する場合は、デフォルトで左上からの基準として記述する。しかしCSS3から右下からの基準での表記に対応したので、明示的にright 10px bottom 30pxと入れる事で、右から10px 下から30pxと指定できるようになった。（※省略した場合は左上基準）

background-sizeプロパティの使い方

背景画像のサイズを指定する

background-sizeは、背景画像のサイズを指定するプロパティで、いくつかの指定方法があるので、一覧表で見てみよう！

cover	画像の縦横比を保持したまま、背景領域を余白が見えないように最小サイズで覆い尽くすサイズに自動調整
contain	画像の縦横比を保ったまま、背景画像が切れずにすべて表示されるサイズに自動調整
auto	元画像のサイズをそのまま表示し、サイズ調整はしない
数値＋単位	`30px 50px`のように背景画像の幅と高さの順に半角スペースで区切って、単位付きの数値で指定。1つだけ指定した場合は、高さがautoになる。
%値	`20% 30%`のように背景画像の幅と高さの順に半角スペースで区切って、%値で指定。親ボックスの領域に対する割合。1つだけ指定した場合は、高さはautoになる。

このように５つの指定があり、それぞれの特徴を理解して使い分けよう。

具体的にどんな風に表示されるか？例を交えて見てみたい人は、次の記事で丁寧に解説しているので参考にしておこう！

CSSの背景画像のサイズ指定「backgrouond-size」の使い方

background-originプロパティの使い方

背景画像の配置が始まる基点を指定

background-originは背景画像を設定した時の画像が始まる位置である「基点」を指定するものである。background-originは、次に紹介するbackground-clipとセットで理解したほうが良い。

background-originとbackground-clipは、次に紹介する共通する３つの値を持っている。

background-originとbackground-clipは似ているが、background-originは「基点」がどこかを指定するものであるのに対し、background-clipは「どこまで表示するか（表示領域）」を指定するプロパティである。

まずはbackground-originの３つの値を順番に見てみよう

border-box	ボーダーを含めたボックスの端が基準位置
padding-box	ボーダーを除いたボックスの内側が基準位置
content-box	ボックス内の余白を含めない、コンテンツ領域が基準位置

例では、3つのボックスにそれぞれborder-box、padding-box、content-boxの順番で設定し、共通してdivに対して「10pxの透明のボーダーと、paddingを10px」入れて結果をわかりやすくしている。

CSS

.box1{background-origin: border-box; }
.box2{background-origin: padding-box; }
.box3{background-origin: content-box; }
div{
  border:10px solid rgba(255, 153, 0, 0.4);
  padding:10px;
  height:
  }

HTMLの記述例

<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>

ブラウザ表示 background-originの３つの値の比較

border-box

padding-box

content-box

この３つ見るとわかると思うのだが、あくまで表示の「基点」を指定しているだけなので、表示領域(background-clip)はすべて同じで初期値のborder-boxの値となっており、borderを含めたすべてが表示領域である事がわかる。

background-clipプロパティの使い方

背景画像の表示領域を指定

前述したとおり、background-clipは、background-originと似ているが、background-originは「基点」がどこかを指定するものであるのに対し、background-clipは「どこまで表示するか（表示領域）」を指定するプロパティである。

ブラウザ表示 background-clipの３つの値の比較

border-box

padding-box

content-box

この３つ見るとわかると思うのだが、あくまで表示領域を指定しているだけなので、表示の「基点（background-origin）」はすべて同じで初期値のpadding-boxの値となっており、borderを除いたのborderの

内側から基点がスタートしている事がわかる。

background-attachmentプロパティの使い方

スクロール時の背景画像の固定の有無を指定

background-attachmentは、ページのスクロール時に背景画像も一緒にスクロールさせるか固定するかを指定するプロパティだ。

background-attachment: fixed;の挙動

fixedを指定した場合は、画面スクロール時に「背景画像は固定されてスクロールしない」。

CSS

.test{
  background-attachment: fixed;
  height:200px; /*わかりやすいように高さ指定*/
}

ブラウザ表示 background-attachment: fixed;

background-attachment: scrollの挙動

scroll（初期値）を指定した場合は、画面のスクロール時に「背景画像もスクロールされる」

CSS

.test{
  background-attachment: scroll;
  height:200px; /*わかりやすいように高さ指定*/
}

ブラウザ表示 background-attachment: scroll;

background-attachment: localの挙動

localはボックスの中身がボックスの高さを超える量でoverflowの設定で、スクロール表示できる状態の時に、背景画像もスクロールについてくるように設定できる値である。

CSS

.test{
  background-attachment: local;
  overflow:scroll; /*わかりやすいように指定*/
  height:200px; /*わかりやすいように高さ指定*/
}

ブラウザ表示 background-attachment: local;

↓
↓
↓
↓
↓
↓
↓
↓
↓
↓
↓
↓
↓
↓
↓
↓
↓
↓
↓

複数のプロパティを一気に指定できるbackgroundプロパティ

これまで紹介した、ボックスの背景を指定する様々なプロパティのすべてを設定する事が可能なのが、backgroundプロパティである。backgroundプロパティはすべてのプロパティを設定できるだけでなく、複数のプロパティを一気に指定することも可能なのだ。

例えば、background-imageとbackground-repeatとbackground-positionの３つを一気に指定する時の記述は次のようになる。

CSS

.test{
  background: url(image/01.jpg) no-repeat right top;
}

このように半角スペースで（順不同）区切って指定することで、一気に指定できるのでとても便利なのだ！

backgroundで複数のプロパティを一気に指定する時の注意点

複数してできてとても便利なのだが、注意点もありbackground-sizeを指定する際は、background-positionとセットで指定する必要があり、background-positionの後に/をはさんでbackground-sizeの順番で指定しないと表示されない！具体的には次の例を見てみよう。

CSS

.test{
  background:url(image/01.jpg) left top / 50px 50px no-repeat;
}

このようにleft top / 50px 50pxといった形で、positionの後に「/」をはさんでサイズを指定する必要があるので注意しよう！