レスポンシブデザインでリピートしないタイプの背景画像があると悩んでいました。

デバイスによって、横幅が違うため、自ずと要素の横幅が変わる中でどのように背景画像を指定すればいいのだろうか・・・と。

「その要素は横幅が固定です。」となればいいのですが、そういうわけにもいかないと思います。

これは背景画像だけでなく、iframeや動画の埋め込みなんかもこのようなことが起きるかと思います。

この問題を解決する方法を少し前に発見したので記載したいと思います。

ちなみに今までの対処法としては、ブレークポイントに合わせて都度高さの設定を行っていました。
そのブレイクポイントの解像度のデバイスならいいんですが、それ以外だと崩れて見えてしまっていました。

新しい方法の説明する前に、DEMOをご覧ください。
わかりづらいかもしれませんが、今までの方法と新しい方法を２つを載せています。
ブラウザを縮めてみると２つの違いが発生します。

DEMO

新しい方法の説明をさせていただきます。

htmlは変わりません。(レイアウト上classつけてますが)

cssの設定が違います。

今回の方法は、

注目する箇所は
擬似要素でpaddingを設定している箇所です。
padding-topを75%にしています。
この75%というのは、横幅に対しての比率になります。
というのも、
marginやpaddingの上下の%やemの数値は、横幅に対してになるらしいです。
この場合横幅が100pxだとしたら、padding-topは75pxになります。

この設定によって、ブラウザのサイズが変わっても縦横比を固定することが出来ます。

中の要素をabsoluteをかける必要があるので、この部分が場合によっては問題発生するかもしれません。

この仕組・考え方は以下の記事をご参考ください。
レスポンシブWebデザインでハマりがちな%指定

冒頭でも申し上げたとおり、背景画像の場合だけでなく様々な状況で使えるtipsだと思います。