支援対象地域:札幌、仙台、関東、愛知、関西、広島、福岡


HTMLで画像を表示させたい時に、<img src="〇〇">を利用するかと思います。
しかし、<img src="〇〇">では画像の上に背景を表示させたい時など、CSSの記述が面倒です。
そんな時に便利なbackground-imageです。
background-imageを使えば、簡単に画像の上に要素を重ねることができます。
当記事ではHTML/CSS初心者の方に向け、background-imageについて、使い方や注意点についてご紹介します。

background-imageとは

要素の背景に画像を表示させます。
背景画像は今やWebサイト制作に欠かせないものですので、現在Web制作を勉強している方には避けて通れないものとなっております。
では基本的な構文を見ていきましょう。

HTML


<div class="background">

    <h1>背景画像</h1>

</div>

CSS


.background{
    background-image:url(画像のパス);
}

まずはこれだけです。

画像のパスと書かれた部分が初心者の方には分かりにくいと思うので、ここで解説します。

パス(PATH)とは

HTMLでいうパスとは、簡単に言うと「ファイルのある場所」です。
HTMLとCSSを関連づける際、<link href="css/style.css" rel="stylesheet">のような記述をしたかと思います。
この例ですと「css/style.css」の部分がパスです。
「cssフォルダ」の「style.css」というファイルを指定しています。

パスには相対パスと絶対パスがあります。

相対パス

現在の階層から見て、目的のファイルがどこにあるかを示す道順

絶対パス

WebサイトのURLのように、どこから参照してもその道順が変わらないもの

今回の<link href="css/style.css" rel="stylesheet">という例で使用しているのは相対パスです。
htmlファイルの置かれている階層からcssフォルダのstyle.cssというファイルを指定している、ということです。

実際の記述

話を戻しますと、url(画像のパス)の、()内に背景として設定したい画像のパスを入れます。
cssフォルダと画像フォルダが分けられているとします。
その場合、パスの部分に、url(../img/〇〇.jpg)と記述します。
「..」とは、cssファイルから見て、「ひとつ上の階層」という指定です。
imgフォルダはcssファイルから見て、ひとつ上の階層に位置しますので、この指定をしてあげなければいけません。

DreamweaverやBracketsでは、パスを入力した際、パスの上にマウスポインターを持っていけば画像のビューが表示されますので、表示されなければパスが間違っているという判断ができます。

background-imageの注意点その1

上にもあったコードですが、


<div class="background">

    <h1>背景画像</h1>

</div>

ここにbackground-imageを表示したとしても、元の画像がそのまま表示されるわけではありません。
background-imageは要素の高さに応じて表示範囲が変わりますので、この場合ですとh1の高さ分しか画像が表示されません。
また、要素の高さが0(h1すら入っていない空のdivなど)ですと、background-imageを指定しても何も表示されません。
パスは合っているのに画像が表示されない、という問題に直面した方は要素の高さを見直しましょう。

background-imageと同時に指定するプロパティ

無事画像が表示されても、大きすぎたり、変な位置だったり、1つでいいのに同じ画像が複数表示されていたり、と問題は尽きません。
それらを次に紹介するプロパティで解決していきます。

background-repeat

背景画像を繰り返し表示するかについての指定です。
初期値はrepeatとなっています。

background-repeat:no-repeat;

背景画像の繰り返し表示行いません。
現在の背景画像の使われ方では、これを指定する場合が多いです。

background-repeat:repeat-x;

画像をx軸(横方向)にのみ繰り返し表示します。

background-repeat:repeat-y;

画像をy軸(縦方向)にのみ繰り返し表示します。

background-size

背景画像の大きさを指定します。
初期値はautoとなっています。

background-size:〇〇%,〇〇%;

背景画像のサイズを幅、高さの順で指定します。
%ではなくpxで指定することも可能です。

background-size:contain;

画像の縦横比を維持したまま、背景領域にに収まるように伸縮します。

background-size:cover;

画像の縦横比を維持したまま、背景領域が全て隠れるように画像を伸縮します。

background-position

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

background-postion:center;

画像を中央に表示します。

background-postion:left;

画像を左寄せに表示します。

background-postion:right;

画像を右寄せに表示します。

background-postion:top;

画像を上寄せに表示します。

background-postion:bottom;

画像を下寄せに表示します。
これらは、background-postion:right,bottom;のように同時に指定することもできます。

background-postion:〇〇%,〇〇%;

要素の左上を基準に%で表示位置を指定します。
pxでの指定も可能です

基本的にbackground-imageは
background-repeat;
background-size;
background-postion;
この3つで表示の調整を行います。

しかしこの3つだけでは完全にレイアウトを調整することはできないので、要素のpaddingやheight、widthなどを指定し調整していきます。

表示画像のレイアウトには直接関係ありませんが、 background-attachmentという、スクロール時に背景画像が動くか動かないかの指定をするプロパティもあります。

画像の表示とその他の処理をまとめて記述

background:url(../img/〇〇.jpg)no-repeat center;
このように記述すれば、背景画像の指定と繰り返しの有無、表示位置をまとめて指定できます。
color、image、repeat、attachment、positionを指定できます。

複数の背景画像を指定

background-image:url(パス),url(パス);
このようにコンマで区切ると複数の画像を指定できます。
最初に指定した画像が最前面に、最後に指定した画像が最背面になります。

以上のプロパティを駆使し、背景画像を表示していきましょう
よくある、画面いっぱいに背景画像を表示したい場合など、background-sizeをcoverとし、要素の高さを100vh、widthを100%とすると簡単に実現できます。

background-imageの注意点その2

background-imageは「背景画像」であるということです。
背景画像はブラウザ上では画像ではなく背景として扱われます。
つまり「alt」の指定ができず、音声読み上げ機能などにもスルーされてしまいます。
Webページ上で必要な情報は背景画像ではなく<img src="〇〇">で表示させるようにしましょう。

最後に

今回はbackground-imageについての解説と注意点について紹介いたしました。
昨今のWebデザインでは背景画像を使用する機会は非常に多いので、ぜひ自在に扱えるようになりたいですね。
ブラウザの検証機能も併用し、なにをどうしたらどのように変化するのかを実際に目で確かめながらWeb制作の勉強を進めていきましょう。