Webデザインの教科書
- 背景画像 -
Scroll

CSSだけでレスポンシブ対応背景画像の使い方とテクニック

みなさん、Webデザインで背景画像を入れたくなったことはありませんか?

実は、今話してるヒツジも背景画像です。

こんな感じに、いろんな活用の仕方があります。

今回は背景画像の使い方とレスポンシブ対応について紹介します。

ではさっそく、背景に画像を入れてみましょう。

好きな画像を1枚用意してください。

背景に画像を入れる

<div class="back"><div> .back {
width: 100%;
height: 400px;
background-image: url('../image/paris.jpg');
}
背景に画像を入れる

背景に画像を入れる時は、CSSから画像を挿入します。

  • 画像の挿入

    background-image」プロパティを使って、画像を挿入します。

    URL関数を使って、保存してある画像の読み込み先を指定します。

    • 画像の読み込み
      Web練習フォルダ/
      index.html
      css/
      main.css
      image/
      paris.jpg

      画像の読み込み先のファイルパスを指定します。

      今回はCSSフォルダの「main.css」から画像を読み込みます。

      指定するファイルパスは「../image/paris.jpg」のように、「main.css」から画像を読み込みます。

      .back {
      background-image: url('../image/paris.jpg');
      }
    • 画像の大きさ

      背景画像を表示する時は、画像の大きさがはっきりと指定されている必要があります。

      今回は画像の横幅を「100%」高さを「400px」に指定します。

      .back {
      width: 100%;
      height: 400px;
      background-image: url('../image/paris.jpg');
      }
    大きさを指定しなかった場合

    CSSで背景画像を挿入する時は、「width」と「height」を指定する必要があります。

    もし大きさを指定しなかった場合は、画像の大きさは「0px」になります。

    つまり、実際に画像は表示されていますが、「0px」なので見えない状態になります。

    .back {
    width: 100%;
    height: 400px;
    }

このようにCSSで画像を表示することが出来ます。

お気づきかもしれませんが、綺麗に画像が表示されていませんよね。

実は背景画像は、表示の仕方を調整する必要があります。

画像を綺麗に表示する

<div class="back"><div> .back {
width: 100%;
height: 400px;
background-image: url('../image/paris.jpg');
background-position: center;
background-size: cover;
background-repeat: no-repeat;
}
画像を綺麗に表示する
  • ポジション

    画像の位置を調整します。

    背景画像が要素の中心に来るようにします。

    background-position」プロパティの値を「center」に指定します。

    .back {
    background-position: center;
    }
  • サイズ

    画像のサイズを調整します。

    背景画像が要素全体にピッタリ収まるように、拡大または縮小します。

    画像によっては、はみ出た部分が切り取られたように見えます。

    background-size」プロパティの値を「cover」に指定します。

    .back {
    background-size: cover;
    }
    切り取られたくない時

    使う画像によっては、切り取られたくないことがあるかと思います。

    そんな時は、切り取られないように画像全体を要素の中に収める方法があります。

    • contain

      画像は切り取られたくないけど綺麗に表示したい時はこのように指定します。

      background-size」プロパティの値を「contain」に指定します。

      要素の大きさに合わせて、画像を拡大または縮小して画像全体が収まるようにします。

      .back {
      background-size: contain;
      }
  • リピート

    画像を繰り返し表示をするか設定します。

    画像の大きさによっては、要素を埋めるように画像が繰り返し並んで表示されます。

    画像を繰り返し表示しない時は「background-repeat」プロパティの値を「no-repeat」に指定します。

    「no-repeat」に設定することで、画像の繰り返しを禁止します。

    .back {
    background-repeat: no-repeat;
    }

これで綺麗に画像が表示されます。

でも、こんなに長く書かなきゃいけないの?と思ったと思います。

実は、省略した書き方があります。

短く書く方法

<div class="back"><div> .back {
width: 100%;
height: 400px;
background: url('../image/paris.jpg') center / cover no-repeat;
}
短く書いて背景画像を表示
background
  1. URL
  2. ポジション
  3. サイズ
  4. リピート
  • 背景画像をまとめて設定

    CSSで背景画像を挿入する時に、綺麗に表示するようにまとめて設定します。

    「background」プロパティの値に「URL」「ポジション」「サイズ」「リピート」をまとめて指定します。

    1. URL
      Web練習フォルダ/
      index.html
      css/
      main.css
      image/
      paris.jpg

      URL関数を使って、保存してある画像の読み込み先を指定します。

      main.css」から「paris.jpg」までの、ファイルパスを指定します。

      .back {
      background: url('../image/paris.jpg');
      }
    2. ポジション

      背景画像が要素の中心に来るようにします。

      URL関数の後ろに「center」を指定します。

      「background-position」の値を「center」にしています。

      .back {
      background: url('../image/paris.jpg') center;
      }
    3. サイズ

      背景画像が要素全体にピッタリ収まるように、拡大または縮小するようにします。

      先ほど指定したポジションの「center」の後ろに「cover」を指定します。

      その時に、「center / cover」のように「/」を間に挟んで指定します。

      「background-size」の値を「cover」にしています。

      .back {
      background: url('../image/paris.jpg') center / cover;
      }
    4. リピート

      画像を繰り返さないように設定します。

      先ほど指定したサイズの「cover」の後ろに「no-repeat」を指定します。

      「background-repeat」の値を「no-repeat」にしています。

      .back {
      background: url('../image/paris.jpg') center / cover no-repeat;
      }

このように、短く書いて背景画像を表示することが出来ます。

長い書き方は覚えるのは大変かもしれません。

最初から短く書く方法で覚えてしまうのも良いかもしれませんね。

背景画像を表示する時に不便なことがあります。

画像の大きさを指定する時に、どうしても高さが固定されてしまいます。

それはなぜなんでしょうか?

背景画像の悪い点

背景画像の高さ

背景画像の大きさは、はっきりと指定される必要があります。

例えば「img」タグのように高さを「auto」にしても、背景画像の場合は「0px」になります。

  • 高さが固定される

    背景画像はあくまでも背景なので、要素に大きさはありません。

    画像の横幅は「100%」で画面サイズなどに合わせることが出来ます。

    ですが、高さを「auto」や「100%」にしても「0px」ままになります。

    そのため、背景画像の高さは固定の値で指定しないと表示が出来ません。

    .back {
    width: 100%;
    height: 400px;
    background: url('../image/paris.jpg') center / cover no-repeat;
    }
  • スマホ対応が難しい

    背景画像は高さが固定されるため、スマホなどの小さな画面では大きすぎることがあります。

    画面の大きさごとに、画像の高さを変更する必要があります。

    • メディアクエリ

      画面サイズごとに画像の高さを変更するには、メディアクエリを使った方法があります。

      例えば、下記のように画面サイズで高さを変更します。

      画面サイズごとに画像の高さを上書きして、小さくします。

      /* パソコン */
      .back {
      width: 100%;
      height: 400px;
      background: url('../image/paris.jpg') center / cover no-repeat;
      }
      /* タブレット */
      @media (max-width: 768px) {
      .back {
      height: 300px;
      }
      }
      /* スマホ */
      @media (max-width: 425px) {
      .back {
      height: 200px;
      }
      }

背景画像の悪い点は、高さがどうしても固定されてしまう点です。

画面サイズごとに調整すれば良いけど、かなり面倒ですよね...。

実は秘策があるんです!!

レスポンシブ対応

<div class="back"><div> .back {
width: 100%;
padding-bottom: 65.5%;
background: url('../image/paris.jpg') center / cover no-repeat;
}
背景画像のレスポンシブ対応

背景画像をレスポンシブ対応します。

  • レスポンシブ対応のやり方

    背景画像の高さは指定せずに、「padding」の余白を使います。

    padding-bottom」で要素の下の余白を作って、要素の高さを作ります。

    1. 背景画像の横幅を広げる

      背景画像の横幅を「100%」にして、最大まで広げます。

      .back {
      width: 100%;
      background: url('../image/paris.jpg') center / cover no-repeat;
      }
    2. 解像度から高さを計算する
      =
      65.56%

      使用する画像の解像度から、縦と横の比率を計算します。

      今回は、横が「640px」縦が「426px」の解像度の画像を使用しています。

      横幅に対して、縦の大きさは何%か計算します。

      =
      画像の高さ

      画像の解像度を式に当てはめる。

      =
      0.665625

      求めた値を、%に変換する

      0.665625 × 100 = 66.5625%

      小数点第一位より下を切り捨て

      画像の高さ = 65.5%
    3. 背景画像の高さを作る

      解像度から求めた値を「padding-bottom」で余白を作って、要素の高さを作ります。

      padding-bottom」の値を「65.5%」に指定します。

      .back {
      padding-bottom: 65.5%;
      }

以上が背景画像のレスポンシブ対応のやり方です。

画像の解像度を使って計算が必要ですが、便利なテクニックです。

最後に、このテクニックを応用してみましょう。

テクニックの応用

<div class="frame">
<div class="back"><div>
<div>
.frame {
margin: 2em auto;
max-width: 800px;
}
.back {
width: 100%;
padding-bottom: 65.5%;
background: url('../image/paris.jpg') center / cover no-repeat;
}
すべての画面サイズに対応する
  • 背景画像のサイズ制限

    レスポンシブ対応した背景画像は、画面サイズに合わせてどこまでも大きくなります。

    背景画像が大きすぎるのもデザイン的によくないので、サイズを制限します。

    • 要素の構造

      背景画像を入れる「back」クラスの親要素に、サイズ制限をする「frame」クラスを作成します。

      「back」クラスは常に最大(100%)まで広がります。

      親要素の「frame」クラスの大きさで、画像サイズを制限します。

    • サイズの制限

      パソコンなどの大きな画面では、背景画像が大きくならないように制限します。

      画面サイズが「800px」より大きい時は、「frame」クラスの大きさを「800px」に固定します。

      さらに、「margin」の値を「auto」にして、背景画像が中央に寄るようにします。

      .frame {
      margin: 2em auto;
      max-width: 800px;
      }

以上が背景画像で使えるテクニックです。

難しい処理をしなくても、ここまでレスポンシブ対応出来ます。

ぜひ使ってみてください!!