CSSで背景画像を縦横比を維持したままレスポンシブ対応するには？

css

スマホのデバイスが増えるにつれて背景画像のレスポンシブ対応が必要になってくると思いますが背景画像のレスポンシブってどうしたらいいのか忘備録。

高さを%指定してもダメなのか

背景画像の場合、テキストなど無い場合に高さをpxで指定するなら確保できますが、%の場合は高さを確保する事はできません。

高さをpaddingで確保する

解決策は高さの「heigth」プロパティではなく「padding-top」で出してあげれば確保できます。その際に%で指定するのがポイントです。
背景領域を完全に覆いたいので「background-size」は「cover」にしています。




.set_bg{
  background:url('背景画像のパス') center center no-repeat;
  width:100%;
  padding-top:50%;
  background-size:cover;
}

「padding-top」で画像と同じ高さになるように調整してみてください。画像の高さより小さい値の％で指定すると画像の全体が表示されないままの縦横比でレスポンシブになります。例えば「background」の位置で「top」を指定していた場合に「padding-top」が「10%」とかだと画像と同じ高さの余白が確保できないので画像の上の部分しか表示されない状態となります。

See the Pen 背景画像のレスポンシブ by 石切山 公宏 (@kirikirimai) on CodePen.

背景画像の上に文章やコンテンツを配置したい場合は？

説明した通り、「padding-top」を使用すればレスポンシブに対応できるんですが、背景画像の上にタイトルや文章などテキスト要素が入る事も多々あるかと思います。その場合ですと「padding-top」が効いてしまってるので、希望のレイアウトができません。それをどうすればいいのか？という事を説明していきます。

背景画像を基準にして絶対配置で対応！

その場合は、背景画像に「position:relative」で基準にして表示したいコンテンツを絶対配置すればいいです。


　　

      
背景画像の上に文章を配置

    




.set_bg{
　position:relative; //基準にする
  background:url('背景画像のパス') center center no-repeat;
  width:100%;
  padding-top:50%;
  background-size:cover;
}

.contents{
  position:absolute;
  width:100%;  //横幅いっぱいにする
  height:100%
}

上記のように設定してあげたらあとのcontents要素内で文章を追加していけば背景画像の上にテキストを配置できます。
＊下記のサンプルでは絶対配置したcontents要素内のテキストを縦横中央に設置してみました。

See the Pen 背景画像の上に文章を設置 by 石切山 公宏 (@kirikirimai) on CodePen.

これでＰＣでもスマホでも縦横比を維持したまま画像が表示できるようになります。