【css】背景画像をレスポンシブできない｜指定方法を解説

背景画像のレスポンシブが思いどおりにできない。

と困っていませんか？

初心者の頃、特にむずかしいのがこの背景画像のレスポンシブ。

しかし、指定の手順が分かればあなたにもできます。

背景画像を思いどおりに表示させられます。

この記事を読み、いつでも背景画像のレスポンシブができるようになりましょう。

背景画像をレスポンシブ対応させる前に【前提】
背景画像をレスポンシブ対応させる
1. ヘッダーの高さ200pxの場合
2. ヘッダーの高さ500pxの場合
参考サイト
まとめ

背景画像をレスポンシブ対応させる前に【前提】

背景画像をレスポンシブ対応させる前に1つ、確認しましょう。

それは背景画像を指定する要素の幅です。

要素

要素の幅をpx指定していないか確認

例えば、ヘッダー幅が500pxだと背景画像のレスポンシブはできません。

理由はヘッダーの幅が500pxで固定されてしまうから。

なので、ヘッダーなどの要素に幅をpx指定しないようにしましょう。

px指定していないか確認↓

header {
  width: 500px;
}

要素の幅は未指定に

ヘッダーにpx指定している場合は、その指定をやめましょう。

header {
  width: 500px;
}

つまりヘッダー幅は未指定でオッケー。

ヘッダー幅が未指定だと、親の<body>と同じ大きさになります。

<body>の幅 = <header>の幅

こうするとヘッダー幅も変化し、レスポンシブ対応可能となります。

<body>
  <header>

  </header>
    ⌇
    ⌇
</body>

header {
  width: auto; /* 初期値のため、指定してもしなくても結果は同じ */
}

※widthの指定がないと、その値は初期値autoとなります。
初期値 … プロパティを指定しない時、与えられる値。
【参考記事】初期値の使い所を理解する

プロパティ・値

要素の最大幅は指定してオッケー

ちなみに要素の最大幅は指定しても大丈夫です。

<body>
  <header>

  </header>
    ⌇
    ⌇
</body>

header {
  width: auto; /* 初期値のため、指定してもしなくても結果は同じ */
  max-width: 960px;
  margin: auto; /* 左右のスペースを均等にするための指定 */
}

さらにmargin: autoで画面幅が大きくなった時、左右均等なスペースになります。

※画面幅 … <body>幅

こんなイメージです↓

それでは次から背景画像をレスポンシブさせていきましょう。

【参考記事】imgのmax-widthとwidthの違い｜min-widthも

背景画像をレスポンシブ対応させる

背景画像のレスポンシブ指定をしていきます。

ここでさらに前提条件を。

前提条件

ヘッダーエリアいっぱいに1枚の画像を表示
ヘッダーの幅は変化するが、高さは変化しない

1はヘッダーの中に空白ができないようにする、という意味。

と言っても分かりにくいと思うので、下図をどうぞ。

ご覧のように、余白がない状態を目指します。

2はヘッダーの高さを変化させないため、heightをpxで指定。

50pxとか100pxとかいうふうに。

使う画像

使用する画像はこちら。

幅：1000px　高さ：500px　縦横比 2：の画像 — 幅：1000px　高さ：500px　縦横比 2：１

画像の大きさは覚えておきましょう。

※画像は横長のものが使いやすいです。
【参考記事】ヘッダー画像は縦長？横長？｜ホームページ制作

指定する順序

指定は４つの流れで行います。

background-imageで使う画像を指定
background-repeatで画像の繰り返し表示をしないよう指定
background-sizeでヘッダーエリアいっぱいに画像を表示
background-positionで画像の見える位置を調整

この流れに沿うと、指定しやすくなるはずです。

もし指定がうまくいかない時、どこで足止めされているのか分かるので。

高さを2つ指定

そして、以下ではヘッダーの高さを2つ設定したケースを見ていきます。

ヘッダーの高さ200px
ヘッダーの高さ500px

高さを変える理由はその違いにより、

画像の大きさ
画像を見せる部分

を変える必要が出てくるからです。

※なぜ高さの指定が必要なのかと思った方は、background-imageをご覧ください。

と説明してますが、これも実際に具体例を見てもらった方が話が早いはず。

そして、ようやくここからご覧いただけます。

なんか、前提となる条件が多くてすみません。

さっさと次へ。

ヘッダーの高さ200pxの場合

ヘッダーのheight: 200pxのケースです。

はじめ、背景に使う画像をbackground-imageで指定。

次に繰り返し表示をno-repeatに。

※background-repeatの初期値はrepeatのため。

<header>

</header>

header {
  height: 200px;
  background-image: url(airplane.png);
  background-repeat: no-repeat;
  background-size: coverまたは100% auto;
}

レスポンシブのポイントとなるのはbackground-size。

この値はcoverまたは100% autoでオッケー。

どちらもヘッダーの中に空白が生まれず、画像もゆがみません。

※background-size: 100% autoはヘッダー幅が400px未満だと、余白が生じます。
　画像の高さが200px以下になるからです。

【参考記事】background-sizeの使い方を解説

ヘッダー幅の大きさに伴って、画像も拡大しているのが分かると思います。

画像は縦横比(2：１)を維持しているため、

幅：500pxの時は高さ：250px
幅：1000pxでは高さ：500px

となります。

一方、ヘッダーの高さは200pxのまま。

なので、画面幅が大きくなるにつれ画像の下が切れていき、飛行機が見えなくなります。

これから分かることは、要素であるヘッダーの大きさと画像の大きさは別であるということ。

そして、飛行機を見えるようにするのがbackground-positionです。

画像の横方向はぜんぶ見えてますが、縦はすべて表示させることができません。

ですので、縦方向の位置を調整するbackground-position-yを使用。

これで、見せたい箇所を表示させるようにします。

<header>

</header>

header {
  height: 200px;
  background-image: url(airplane.png);
  background-repeat: no-repeat;
  background-size: coverまたは100% auto;
  background-position-y: 60%;
}

以下は、ヘッダー幅が600pxの時のものです。
(画像は幅：600px　高さ：300px)

background-position-y: 60%だと、ヘッダー幅が大きくなっても飛行機は見切れません。

どうですか？

全体は見えないけど、肝心なところは表示できていますね。

【参考記事】『background-positionの使い方』の「background-position-xとbackground-position-y」
(クリックすると該当箇所にジャンプします)

ヘッダーの高さ500pxの場合

ヘッダーの高さが先ほどより、大きい場合です。

<header>

</header>

header {
  height: 500px;
  background-image: url(airplane.png);
  background-repeat: no-repeat;
  background-size: cover;
}

高さ500pxの場合、background-sizeはcoverを使います。

background-size: 100% autoは使えません。

なぜなら、ヘッダーに空白が生まれるからです。

以下をご覧ください。

background-size: 100% auto

ヘッダー幅が500pxの時。

画像は幅500px高さ250pxとなり、ヘッダーの下半分が空いてしまいます。

ヘッダーの幅が1000pxの時。

画像幅も1000pxで、高さは500pxとなり、ようやくヘッダーの高さと同じになります。

なのでヘッダー幅1000pxまでは、ヘッダーエリアを画像で覆うことができません。

高さを100％とすれば一応エリアを覆えます。

画像の縦横比が崩れ、歪んで表示されている。 — background-size: 100% 100%

ですが画像の縦横比( 2：１)が崩れ、ゆがんでしまいました。

特に、画面幅がせまい時は。

そんなわけでヘッダーが高さ500pxだと、background-size: 100% autoは指定しません。

background-size: cover

coverを使えば、画像の縦横比を維持してヘッダーエリアを覆い続けます。

高さ500pxを覆うので、画像の大きさは幅1000px 高さ500pxとなります。

ただし以下のようにヘッダーの幅がせまい時は、画像の左側しか見えない状態に。

ですので、background-position-xで横方向の位置を調整してあげます。

<header>

</header>

header {
  height: 500px;
  background-image: url(airplane.png);
  background-repeat: no-repeat;
  background-size: 100% autoまたは cover;
  background-position-x: 50%;
}

background-position-x: 50%と指定すると、ヘッダーエリアの中心に飛行機が。