背景画像が横幅いっぱいにならない

Question

画像をbackground-size 100% containにして余白をなくしたいのですが左側に余白ができてしまいます

どうすれば余白はなくなるでしょうか？

ｃｓｓはこうなっています

.bg-slider {
width: 100vw;
height: 100vh;
background-position:center top;
background-size: 100% contain;
display: flex;
align-items: center;
justify-content: center;
background-repeat: no-repeat;
overflow: hidden;
}

Answer 1

はじめまして、こんにちは。

background:containは縦横比を保ったまま領域内に表示する指定ですので、縦横片方を相対値で指定してもあまり意味がありません。
ですので、どのウィンドウサイズでも綺麗に背景を覆いたければbackground-sizeはcoverにするか、領域内に完全にフィットするサイズの画像を用意する必要があります。
後者の場合でも、閲覧者のディスプレイサイズやウィンドウサイズによってはcontainのままでは、製作者の画面では綺麗に収まっていても閲覧者の見る画面によって余白の有無が生じます。

少しでもご参考になれば幸いです。

Comments

[tundorian-hamu]

100% coverにしてみてうまくいかなくてcoverだけにしてみたらうまくいきました

ありがとうございました！！！！！

Answer 2

スクリーンショットがあればもう少し状況がつかめるんですが
body {margin: 0;padding: 0;}
でどうですか？
どこの余白であるかをブラウザのインスペクタか何かのデバッグツール類で確認する方法を見つけるといいですよ

Comments

[tundorian-hamu]

background-size:coverにしたらうまくいきました！！
回答ありがとうございます！！！！