CSS Html Angular中的主页背景图像大小问题

Question

我有一个通过 CSS 设计的带有背景图片的主页。但是，当页面加载左侧的一部分而右侧的一部分保持白色时。我想让它适合屏幕。

这是我的 HTML ：

<header>
  <section class="bg">
      <div [style.color]="'white'">
        <h1>  Welcome to Shopping Cart</h1>
        <h2>  Online grocery purchase made easy.</h2>
      </div>
  </section>
</header>

这是我的 CSS

.bg{
background-image: url('/assets/images/shopping-1.jpg');
height: 100vh;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
background-attachment: fixed;    
/*background-size: contain;*/
/*background-color: darkblue;*/

}

我尝试过使用width:100vw，但它不起作用。右边越来越伸展，左边仍然是空白的白色部分。设置width: 84vw; 使其在右侧正确。但是左边还是空白。我无法将背景图像向左移动。如何使整个背景图像适合屏幕。

首页图片：

Answer 1

查看父容器的边距。标题或标题的父级是否有边距。如果这些边距被清零，您提供的代码应该可以正常工作。 我将正文边缘归零以让您了解我的意思：

body {
    margin: 0
}
.bg{
    background-image: url('https://i.ytimg.com/vi/tog3dRQxENs/maxresdefault.jpg');
    height: 100vh;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: fixed;
}

笔： https://codepen.io/richiegarcia/pen/QWNYrRN

Answer 2

把它放在你的 CSS 中：

.bg {
    width: 100vw !important;
}