backgroundをwidth100%にしても左右に隙間が出来てしまう
backgroundプロパティの指定を色々変えることで、直った。
以下、chatGPTに聞いてみた時の説明。
backgroundプロパティは、背景画像を指定するだけでなく、以下の3つのプロパティを持っています。
- background-color
- background-image
- background-position
そして、backgroundプロパティは、これらのプロパティを簡単に指定できるようにしたショートハンドプロパティでもあります。
例えば、以下のように書いた場合、背景画像が中央に表示され、スクロールに追従します。
background: url(bg.jpg) center fixed;
しかし、このようにbackgroundプロパティに指定した場合、背景画像は画面のサイズに合わせて伸縮しません。これは、指定した背景画像のサイズに基づいて表示されるためです。
そこで、背景画像を画面いっぱいに広げるためには、background-sizeプロパティを使用する必要があります。background-sizeプロパティには、以下のような値が指定できます。
- contain：背景画像を縮小して全体を表示する。
- cover：背景画像を拡大して全体を覆う。
- 100% 100%：背景画像を画面いっぱいに広げる。
今回の場合、以下のようにbackground-sizeプロパティを指定することで、画面いっぱいに背景画像を広げることができます。
.spacer.orange,.section.orange {
background: url(../img/bg/bgpic.jpg) 50% 0 no-repeat fixed;
background-size: cover;
width:100%;
height:auto;
margin:0;
}
background-sizeプロパティにより、背景画像が画面いっぱいに広がったため、スペースがなくなりました。
