背景に画像を挿入する（background-image・size・position・repeat）

CSS
HTML/CSS

この記事にはプロモーションが含まれています。

投稿：2021・06・23

更新：2022・02・26

普通に画像を貼り付けるだけであれば、HTMLのimgタグを使用すれば良いですが、画像の上に文字や表など別の要素を配置したい場合、imgタグによる画像の挿入では色々と不都合が出てきてしまいます。
そこで今回は、背景画像を指定するための、background-imageプロパティと、それに関連するCSSプロパティを紹介していきます。

– 目次 –

▼背景画像の指定
background-image

▼背景画像の調整
大きさ：background-size
位置：background-position
繰り返し：background-repeat

動画内容：背景画像を指定する方法

要素の背景を修飾するCSSには、背景色を指定できるbackground-colorプロパティがありますが、色をつけるだけでは理想的なデザインを表現できない場合もあります。

たとえば、ヨーロッパの魅力を伝えるWebサイトを作りたいとしましょう。
そして、「ヨーロッパのオシャレな街並みを表現したい」という場合、実際にヨーロッパの街の写真や絵を配置するのが最もイメージを表現できる方法と言えます。

この際、imgタグで画像を挿入しても良いのですが、imgタグだと要素として配置されるので、positionプロパティなどを駆使しない限り、画像の上に重なるように別の要素を配置することはできません。
また、imgタグではなく、background-imageプロパティを使うメリットとして、要素の大きさに合わせて画像を繋げて連続で表示させるということもできます。

具体的な例として、背景色をつけただけのものと、背景画像を指定したものを比べてみましょう。

背景色のみ指定

背景に芝生の画像を指定

背景を画像にするだけでも、だいぶイメージが変わりますね。

ちなみに、background-imageプロパティは画像だけでなく、グラデーションを指定できたりもするのですが、今回は画像の挿入に絞って解説していきます！👍

とりあえず背景に画像を指定する

背景画像の大きさとか位置とか、そういう細かいことはさておき、とりあえず背景に画像を指定する方法から確認していきます。

要素の背景に画像を指定するには、background-imageの値を「url( )」にし、カッコ（　）の中に画像が格納されているファイルの相対パスもしくは絶対パスを記入します。

ちなみに、background-imageプロパティで背景画像の相対パスを指定する場合、基準となるのはHTMLファイルの位置ではなく、CSSファイルが置かれている位置なので注意してください。

相対パスについては、ここでは細かく触れませんが、

１ファイルが同じ階層の同じフォルダにある場合は、ファイル名をそのまま記入すればよい

２同じ階層の別フォルダにある場合は、／（スラッシュ）で別フォルダに移動してファイル名を記載すればよい

３違う階層にある場合は、大元のフォルダの位置まで..／（ドット２つとスラッシュ）で戻り、そこから目的のファイルを辿（たど）れば良い

と、大雑把に覚えておくと良いと思います。
なお、本記事のサンプルコードでは絶対パス（https://〜）を使います。

それでは実際に要素に背景画像を指定してみましょう。以下、サンプルコードと表示結果です。
背景画像だけを指定すると、imgタグで配置されたものとパッと見の区別ができないので、あえて画像の上に文字を配置しています。

    <div><span>吾輩は猫である！</span></div>

      div {
        width: 400px; max-width:100%;
        height: 200px;
        background-image: url(https://web-de-asobo.net/wp-content/uploads/2021/06/neko.jpg);
        display: flex;
        justify-content: center;
        align-items: center;
      }
      span {
        color:white;
        font-weight:bold;
        background-color:rgba(0, 0, 0, .6);
        padding:3px;
      }

吾輩は猫である！

…おや？猫の写真を配置したのですが、肝心の猫が見切れちゃっています。

このように、background-imageプロパティで背景画像を指定しても、そのままでは良い具合にならないことが多いです。
というわけで、次の章では背景画像の調整方法をご紹介していきます！

POINT!

・bakcground-imageプロパティで背景画像を指定できる！
・画像を指定するには、値をurl()にして、（　）の中にファイルの場所を記載する！
・ファイルの記載は相対パス・絶対パスどちらでもOK！
・ただし、そのままでは画像が見切れたり、うまく収まらない場合も多い！

背景画像のサイズを調整する

先ほどのサンプルでは、見事に背景画像が見切れてしまっていました。これを解決する手段は大きく分けて２つです。

１つは、背景画像の位置を調整する…という方法。
そしてもう１つが、背景画像のサイズを調整する…という方法です。

この章では、画像のサイズを調整する方法を解説します。

背景画像のサイズは、background-sizeプロパティで調整することができます。

background-sizeプロパティは、値の種類がいくつかあるので、表にまとめてみました。

＊background-sizeの値＊

値	ポイント
数値+単位	背景画像をpxなどの単位で指定する方法。値を２つ指定した場合、最初に記入した値がwidth（横幅）となり、後に指定した数値がheight（縦幅）となる。
cover	画像の縦横比を崩さずに、画像ができるだけ大きくなるよう拡大縮小される。
contain	縦横比を維持したまま、画像が全て表示されるように調整される。

数値で指定する場合、特に横と縦のどちらも指定する場合は縦横比が崩れるおそれがあるので注意が必要です。

下のサンプルコードと表示結果は、元画像の縦横比を無視して背景画像のサイズを調整しているダメな例です。

    <div><span>吾輩は猫である！</span></div>

      div {
        width: 400px; max-width:100%;
        height: 200px;
        background-image: url(https://web-de-asobo.net/wp-content/uploads/2021/06/neko.jpg);
        display: flex;
        justify-content: center;
        align-items:flex-end;
        background-size:400px 200px;
      }
      span {
        color:white;
        font-weight:bold;
        background-color:rgba(0, 0, 0, .6);
        padding:3px;
        margin-bottom: 10px;
      }

吾輩は猫である！

元の画像が縦長なのに、横長（400px × 200px）に指定しているため、横にべちゃっと潰れたようになってしまっています。

縦横比を崩さないようにするには、横幅か縦幅のどちらかだけを指定して、もう片方はautoにする必要があります。

もしくは、キーワード値であるcoverやcontainで指定するという方法もあります。

coverは、画像が全体的に全て表示されるとは限らないが、できるだけ大きく表示させることができ、
containは、小さく表示されてしまう可能性があるが、画像が全体的におさまるように表示させることができます。

見切れても良い場合は「cover」、確実に枠内に背景画像を全て表示させたい場合は「contain」を指定すると良いです。

以下、「cover」と「contain」を適用させた場合のサンプルです。
background-sizeの値が変わるだけなので、サンプルコードは省略します

吾輩は猫である！

coverの場合

吾輩は猫である！

containの場合

このように、背景画像の大きさを調整することで、未調整では見切れてしまった部分を表示させることができます。

また、background-sizeの値がcontainの方は、画像が繰り返し表示（リピート）されていますが、リピートの有無は後ほど紹介するbackground-repeatプロパティで指定することが可能です。

POINT!

・背景画像の大きさを指定するには、background-sizeプロパティを適用させる！
・値は数値のほか、coverやcontainといったキーワード値がある！
・coverもcontainも縦横比を維持でき、coverはできるだけ大きく表示、containは画像が枠内におさまるように表示させる！

背景画像の位置を調整する

背景画像のサイズ調整だけでビシッと決まることもありますが、それだけではまだ不十分な場合もあります。
さきほどbackground-size:cover;と指定した時のサンプルは、縦横比は崩れていないものの、結局猫の画像が見切れてしまっていました。このままでは使えませんね。

そこで、この章では背景画像の位置を調整するbackground-positionプロパティを紹介します。

background-positionは、値が複数あるというよりも、指定の仕方が複数あるという感じです。
こちらも表にまとめたので、確認していきましょう！

＊background-positionの値＊

値	ポイント
キーワード値	center（中央）やtop（上部）、bottom（下部）など。
数値（単位）×２＝２つの値	横（右）方向への移動距離と、縦（下）方向への移動距離。負の値にすると逆方向になる。
キーワード値＋数値（単位）×２＝４つの値	たとえば「top 20% right 15％」は、上から20％かつ右から15％の位置になる。

指定の仕方は他にもあるのですが、とりあえずこれだけ押さえておけばOKです。

では、さっそく見切れていた猫の背景画像の位置を調整してみましょう。background-size: cover; とした上で、background-poistion: center; の設定を付け加えます。

    <div><span>吾輩は猫である！</span></div>

      div {
        width: 400px; max-width:100%;
        height: 200px;
        background-image: url(https://web-de-asobo.net/wp-content/uploads/2021/06/neko.jpg);
        display: flex;
        justify-content: center;
        align-items:flex-end;
        background-size: cover;
        background-position: center;
      }
      span {
        color:white;
        font-weight:bold;
        background-color:rgba(0, 0, 0, .6);
        padding:3px;
        margin-bottom: 10px;
      }

吾輩は猫である！

背景画像の基準位置が中央になり、写真の主役である猫が目立つように配置できました。

背景画像の位置のデフォルトは、0% 0%（画像の左上端）であるため、被写体が画像の中央にある場合は、位置調整を行う必要があります。
また、今回は「数値（単位）×２」で位置調整を行う場合の、値を変更できるサンプルを用意してみました。
色々値を変えてみて、背景画像がどう動くか確認してみて下さいね！

吾輩は猫である！

▲サンプルでは画像が動いたのが分かりやすいよう、画像の繰り返し（background-repeat）はオフ（no-repeat）にしていますが、もちろん、繰り返しを設定しつつ画像の位置調整を行うことも可能です。

POINT!

・背景画像の位置を調整するには、background-positionプロパティを適用させる！
・値はキーワード値や、数値（単位）、両方を組み合わせたものがある！
・初期値は「0% 0%」（画像の左上端）のため、画像の中央に被写体がある場合は、位置を調整する必要が出てくることが多い！

背景画像の繰り返しの指定

背景画像を指定する際、画像が連続して繋がって表示されてほしい場合と、そうでない場合がああります。

繋がってほしい場合というのはシンプルな画像を背景にして、模様に見せたい…という場合です。

例として下の背景画像をご覧ください。

画像が繋がって模様に見える！

もともとの画像は、下のように木のシルエットが１つだけのものです。

これを繰り返し表示させることで、模様のように見せることができます。

一方、これまで例で使ってきた猫の写真のように、画像が繋がって表示されると違和感やしつこさが出る場合もあります。

吾輩は猫である！

背景画像の性質によって、繰り返し表示設定を調整する必要があるため、この章ではそれを調整するbackground-repeatプロパティを紹介していきます。

background-repeatプロパティはキーワード値をとるのですが、その種類別にまとめたものが下の表です。

＊background-repeatの値＊

値	ポイント
repeat	繰り返し表示の指定。背景画像が領域内に収まらなくても敷き詰めて表示される。
space	繰り返し表示されるが、背景画像が領域内におさまる限り、画像が切り取られないように表示される。
round	繰り返し表示。領域の広さによって画像が伸び縮みする。
no-repeat	繰り返し表示をしない。

また、background-repeatは値を２つまで指定することができ、２つ指定した場合は、１つ目が横方向のリピート指定、２つ目が縦方向のリピート指定になります。

それではサンプルコードと、切り替え機能つき表示結果を確認してみましょう！

    <div><span>背景画像の繰り返し！</span></div>

      div {
        width: 400px; max-width:100%;
        height: 250px;
        background-image: url(https://web-de-asobo.net/wp-content/uploads/2021/06/ki.jpg);
        display: flex;
        justify-content: center;
        align-items:flex-end;
        background-size: 100px 100px;
        background-position: bottom;
        background-repeat: repeat;
      }
      span {
        color:white;
        font-weight:bold;
        background-color:rgba(0, 0, 0, .6);
        padding:3px;
      }

背景画像の繰り返し！

繰り返さない場合の値は「no-repeat」１つだけですが、リピート（繰り返し）設定には種類が色々あるので、デザインに応じて使い分けましょう！

POINT!

・背景画像の繰り返しの設定は、background-repeatプロパティを適用させる！
・値はキーワード値を取り、繰り返さない場合は「no-repeat」！
・値を２つ指定すると、１つ目の値は「横方向の繰り返し指定」、２つ目の値は「縦方向の繰り返し指定」になる！

ワンポイントチェック

背景画像を指定することで、Webサイトのデザインの幅をグッと高めることができるのですが、デメリットもあります。

まず、背景画像を読み込ませる必要があるため、画像のサイズによってはページが重くなるという点。
ページが軽く、ネット回線が多少混雑していてもスムーズに表示できるかという点は、SEO対策としても重要なポイントです。

検索エンジンに優良なサイトであると認識してもらうには、必要以上にWebサイトが重くならないようにしておくことが大切です。
背景画像に限らず、

！画像は必要以上に配置しない

！配置するなら圧縮やリサイズして軽くする

という点は常に意識しましょう！
個人的な感覚ですが、基本的に画像は100KB以下が望ましいと思っています。（あくまで個人的な目安であり、Web制作における一般的な共通認識ではありません）

また、背景に画像を指定する場合、imgタグのようにalt属性を設定することができません。
何らかの原因で画像が表示されなかった場合、代替テキストも表示されないということになるため、単に装飾目的ではなく「何かを説明したり、伝えたりするための画像」である場合は、imgタグを使うようにしましょう。

今回の動画で紹介したコード！

今回の解説動画で使用したコードを掲載しています。学習用としてご自由にコピペしてお使い下さい。（※スクロールできます）

<!DOCTYPE html>
<html lang="ja" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title></title>
    <style media="screen">
      .bgi {
        background-image: url(https://web-de-asobo.net/wp-content/uploads/2021/06/neko.jpg);
        width: 500px;
        height: 500px;
        display: flex;
        justify-content: center;
        align-items: center;
        margin: 200px auto;
      }
      .bgi p {
        background-color: rgba(0,0,0,.5);
        padding: 5px;
        color: white;
        font-weight: bold;
      }

      .bgi_2 {
        background-size: cover;
      }

      .bgi_3 {
        background-size: contain;
      }

      .bgi_4 {
        background-position: center;
      }

      .bgi_5 {
        background-position: center bottom;
      }

      .bgi_6 {
        background-size: 100px 200px;
        background-repeat: repeat;
      }

      .bgi_7 {
        background-size: 100px 200px;
        background-position: center;
        background-repeat: no-repeat;
      }

      .bgi_8 {
        background-size: 100px 200px;
        background-repeat: space;
      }

      .bgi_9 {
        background-size: 100px 200px;
        background-repeat: round;
      }


    </style>
  </head>
  <body>
    <div class="" style="margin: 200px auto; width:fit-content;">
      <p>元画像はこれ</p>
      <img src="https://web-de-asobo.net/wp-content/uploads/2021/06/neko.jpg" alt="">

    </div>

    <div class="bgi bgi_1">
      <p>背景画像を指定（他は無調整）</p>
    </div>

    <div class="bgi bgi_2">
      <p>background-size: cover;</p>
    </div>

    <div class="bgi bgi_3">
      <p>background-size: contain;</p>
    </div>

    <div class="bgi bgi_4">
      <p>background-position: center;</p>
    </div>

    <div class="bgi bgi_5">
      <p>background-position: center bottom;</p>
    </div>

    <div class="bgi bgi_6">
      <p>background-size: 100px 200px;<br>
      background-repeat: repeat;</p>
    </div>

    <div class="bgi bgi_7">
      <p>background-size: 100px 200px;<br>
        background-position: center;<br>
      background-repeat: no-repeat;</p>
    </div>

    <div class="bgi bgi_8">
      <p>background-size: 100px 200px;<br>
        background-repeat: space;</p>
    </div>

    <div class="bgi bgi_9">
      <p>background-size: 100px 200px;<br>
        background-repeat: round;</p>
    </div>

  </body>
</html>

記事のトップへ戻る