背景画像 横幅の設定方法

Question

実現したいこと

このサイトの様に、背景画像をつけたのですが、横幅に空白ができてしまい、全画面ではありません。

widthで設定しようと思ったのですが、できませんでした。

コード

<div class="fixed-bg bg01">
                <h1>見出し</h1>
            </div>
             
            <div class="scroll-bg bg-color01" class="start">
                <p>コンテンツ</p>
            </div>
             
            <div class="fixed-bg bg02">
                <h1>見出し</h1>
            </div>
             
            <div class="scroll-bg bg-color02">
                <p>コンテンツ</p>
            </div>

.fixed-bg {
  min-height: 100vh;
  background-attachment: fixed;
  background-size: cover;
  background-position: center;
}
 
.bg01 {
  background-image: url(170923.jpg);
  background-size: contain;
  background-repeat: no-repeat
  }
 
.bg02 {
  background-image: url(../images/bg02.jpg);

Answer 1

<div class="fixed-bg bg01">

と、2つのクラスを指定されてて、

fixed-bg　の方は　background-size: cover;　となっているのに、bg01　の方は
background-size: contain;　となってますね。
つまり、下に書かれてるcontain　の方が効いてる訳ですが、余白なしにしたければ　cover　の方が良い気がしますが。

CSS の background-size での cover、contain、auto の違い

Comments

[退会済みユーザー]

ご回答ありがとうございます。

containをcoverに書き換えれば良いという事ですか？

表示結果
>>> 残念ながら、横に余白のスペースが空いてしまいました。

[mari.rinn]

ん？解決されてないのになぜベストアンサー？？？

それはおいといて、

ググってみたら、
background-attachment: fixed;
background-size: cover;
をセットで使うとスマホでは効かないというのを見ました。勉強不足でごめんなさい。

ということで、こちらのページの擬似要素でやるやり方をとりあえず試してみられたらと思います。

https://taroken.org/css-mobile-parallax/

[退会済みユーザー]

その後、試して解決できた為、ベストアンサーにさせていただきました。

Answer 2

こんばんは！どの背景画像に空白が出ていますか？

現状分かる範囲での回答になりますが...
reset.cssなどは使っていますか？
ブラウザ固有のスタイルがリセットされておらず、意図しないマージンなどがついている可能性があります。

また、.bg01のbackground-repeatにセミコロンがついていないので
つけてあげましょう^^

.bg01 {
  background-image: url(170923.jpg);
  background-size: contain;
  background-repeat: no-repeat;
}

Comments

[kyoya0819]

セミコロンは不要です。

参考：https://coliss.com/articles/build-websites/operation/css/css-syntax-matters-syntax-doesnt.html#h203

[Meeets]

正確には、セミコロンは”あってもなくても良い”ですね
言葉足らずでした。

ただ、今回の場合は、.fixed-bg にはセミコロンがついている
またセミコロンをつける派が多く、運用を踏まえて
細かい点ですが、補足回答でした。

[退会済みユーザー]

どの背景画像に空白が出ていますか？
>>> 背景画像は、コードを見ると一目瞭然で一つしか設定していないと思います。

よって、背景画像は以下のコードで表示しています。

<div class="fixed-bg bg01">
<h1>見出し</h1>
</div>