特にレスポンシブやスマホサイトで見かけることが多い、どんなウィンドウサイズでも縦横比を維持しつつ横幅いっぱいに画像を表示している見栄えですが、imgであれば画像を配置して width:100%; と height:auto; を指定しておけば簡単に表示させることができても、その見栄えを背景画像を利用してとなると先述した方法では実装できません。背景画像でも同じように縦横比を維持しつつ横幅いっぱいに画像を表示させたい時は以下の方法で実装することができます。
単刀直入に実装方法を紹介すると、背景画像を表示したい部分に以下のようなCSSを記述することで縦横比を維持しつつ横幅いっぱいに背景画像を表示させることができ、以下のサンプルは表示させたい画像が「横幅：1000px 高さ：300px」の画像だった場合のものになります。
CSS
.background {
width: 100%;
height: 0;
padding-top: calc(300 / 1000 * 100%); /* calc(画像高さ ÷ 画像横幅 × 100%) */
background: url(bg.jpg) center center / cover no-repeat;
}まずimgを幅いっぱいに表示させたい時と同様で、背景画像を表示させたい要素が横幅いっぱいになるようwidth: 100%;を記述します。
次に高さの指定なのですが、高さに関してはheightではなくpadding-top（padding-bottomでも可）を利用して高さの領域を確保するので、ここではheight: 0;を記述します。padding-topの値はCSSにもコメントをいれてありますが、表示させる画像によって指定する値を都度計算する必要があり、その際の計算式は「画像高さ ÷ 画像横幅 × 100」となります。
calcが使用できない場合や計算が面倒でない場合は、先述した計算式の結果を%で記述するのでももちろん問題ないですが、上記サンプルのようにcalcを利用した形で記述をすれば自分で計算する必要もないですし、今後表示させる画像サイズが変わった場合もやはり自分で計算せずにcalc部分に記述されている画像の値を変更するだけで楽なのでおすすめです。
また、Sassを使っているならmixinで引数を使ってcalc内の値を変更できるようにしておくとか、単純に演算機能つかって値が出力されるようにしておくとかするとより使い回ししやすいと思います。
あとはbackground-size: cover;を使用する形（必要なければ省略）で背景画像を指定すれば、ウィンドウサイズが変わっても常に横幅いっぱいで且つ縦横比を維持した高さで表示される背景画像を実装できます。
以下でサイズや見た目が同じ画像を使用してimgを横幅いっぱいにしたものと背景画像を横幅いっぱいにしたものとで見比べることができるので、ちゃんと縦横比が維持されているのかなどを実際に確認したい場合は以下をご覧ください。