当サイトはアフィリエイト広告を利用しています。

【画像表示がうまくいかない⑦】背景画像をレスポンシブできない|指定方法を解説

【html/css|画像表示がうまくいかない⑦】背景画像をレスポンシブできない

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

と困っていませんか?

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

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

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

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

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

背景画像をレスポンシブ対応させる前に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. ヘッダーの幅は変化するが、高さは変化しない

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

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

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

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

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

使う画像

使用する画像はこちら。

幅:1000px 高さ:500px 縦横比 2:の画像
幅:1000px 高さ:500px 縦横比 2:1

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

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

指定する順序

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

  1. background-imageで使う画像を指定
  2. background-repeatで画像の繰り返し表示をしないよう指定
  3. background-sizeでヘッダーエリアいっぱいに画像を表示
  4. 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の使い方を解説

ヘッダー幅の大きさに伴って、画像も拡大していく。
ヘッダーの高さ200px

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

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

  • 幅: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: 0% 0%(初期値)
background-position: 0% 0%(初期値)
background-position-y: 60%
background-position-y: 60%

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

background-position-y: 60%
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-sizecoverを使います。

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

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

以下をご覧ください。

background-size: 100% auto

ヘッダー幅が500pxの時。

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

ヘッダーが背景画像で覆われず、ヘッダーの下半分が空いている。

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

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

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

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

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

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

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

そんなわけでヘッダーが高さ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%と指定すると、ヘッダーエリアの中心に飛行機が。

background-position: 0% 0%(初期値)
background-position: 0% 0%(初期値)
background-position-x: 50%
background-position-x: 50%

また、ヘッダーの幅が拡大・縮小しても飛行機が見えている状態となります。

background-position-x: 50%
background-position-x: 50%

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

この場合も画像の横はぜんぶ見えません。

しかし、飛行機だけは中心に置いて常に見えています。

ですので、まあまあかなくらいの出来にはなるはずです。

参考サイト

この記事はCSS3をもとに書きました。

CSS3とはcssのルールブックみたいなもの、その最新版です。

いずれも翻訳あります。

専門的に書かれてるので、余裕のある方だけご覧ください〜

まとめ

今回は、背景画像のレスポンシブ指定について紹介しました。

ポイントはヘッダーの高さにより、画像の大きさや見える位置を調整することでした。

しかし、どんな時も背景画像を表示させる流れは以下の手順を踏みましょう。

  1. 背景に使う画像を指定し、表示する(background-image)
  2. 要素エリアよりも画像が小さい場合、画像を繰り返し表示させるか決める(background-repeat)
  3. 画像の大きさを調整する(background-size)
  4. 要素エリアの中で、画像をどの位置に表示させるか指定する(background-position)

そうすれば、思うように背景画像を表示させれるはずです。

img画像のレスポンシブ化

以下の記事では、img画像をレスポンシブする方法を紹介しています。

背景画像のレスポンシブよりカンタンなので、ご覧ください。

タイトルとURLをコピーしました