どうも7noteです。画面幅いっぱいに背景画像を表示したい時の方法を紹介。

また、1920pxくらいある大きな画面で見たときにも崩れにくい方法も解説します。

画面幅いっぱいに画像を出すなら、background-size: cover;

.bg{background-image:url(bg.jpg);background-size:cover;/* 要素いっぱいに */background-position:centercenter;}

だけど横幅の短い画像だと思ったところが表示されないことも。。。

下の例だと崖の部分が映らなくなってしまう場合があります。

なので元の画像を加工して、横幅を1920px以上の画像にします。
そうすることで高さはそのまま、横幅が変わっても幅いっぱいに画像が表示されます。

これで横幅が変わっても拡大縮小されにくくなりました。

1920pxにしたのは、一般的なディスプレイがおおきいもので1920pxが多いからです。
画像の高さは、実際に表示される高さと同じ

まとめ

オシャレなサイトでよく幅いっぱいに画像を表示するデザインを見かけるので、参考にして入れてみてください。
比較的簡単でオシャレになるので、background-size: cover;は重宝してます。

おそまつ！

~ Qiitaで毎日投稿中!! ~
【初心者向け】HTML・CSSのちょいテク詰め合わせ