HTML&CSS

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に%)でも同じ結果になる
ABOUT ME
Jyu2
ソフトウェア会社(SIer)で10年以上勤務のシステムエンジニア|ポケットWiFi使用歴2年以上|ポケットWiFi+αで快適でお得なインターネット環境を構築するための情報を発信|その他、IT情報やWebサービス、アプリ、ガジェットなどの情報を発信|自分と他の人のカバンの中身を紹介するメディア「カバンの中身ラボ(https://kaban-no-nakami-labo.com/)」も運営しています。 ポケットWiFi選びに迷ったらTwitter、お問合せフォームからご連絡ください。