CSSで背景を画面幅いっぱいに表示させる方法

ヘッダーなどを作成する際に幅の最大値は指定するが、背景は画面幅いっぱいに表示したいという場合は多いですよね。そんな時に自分がよくやったミスをメモしておきます。

幅の最大値は指定するが、背景は画面幅いっぱいに表示したいとは？

最初に「幅の最大値は指定するが、背景は画面幅いっぱいに表示したい」ってどんなこと？っていうことを共有しておきたいと思います。

これは自分のブログのヘッダーメニュー(2019/9/8現在)の感じで、ヘッダーメニューの幅の最大値より画面幅が大きければ背景のみが広がり、小さければヘッダーメニューが画面幅に合うというものです。

OKパターン

See the Pen
background-width_OK by Jyu2 (@Jyu2)
on CodePen.

NGパターン

自分がよくやるNGパターンですが、背景は親要素である.headerにつけないといけないものを.containerに背景を指定してしまいます。

See the Pen
background-width_NG by Jyu2 (@Jyu2)
on CodePen.

hedaerだとhedaerタグがあるのでまだなんとか気づいたりしますが、Topの背景画像とかで同様のことをやろうとするとよくはまってしまいます・・・。(.containerの親要素(wrapper)を作ってない)

まとめ

• 背景はコンテナ(container)ではなくラッパー(warpper)につける(warpper：親、container：子)
• widthとmax-widhtの指定は逆(widthにpx、max-widthに%)でも同じ結果になる