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 {&nbsp; &nbsp; margin: 0}.bg{&nbsp; &nbsp; background-image: url('https://i.ytimg.com/vi/tog3dRQxENs/maxresdefault.jpg');&nbsp; &nbsp; height: 100vh;&nbsp; &nbsp; background-position: center;&nbsp; &nbsp; background-repeat: no-repeat;&nbsp; &nbsp; background-size: cover;&nbsp; &nbsp; background-attachment: fixed;}笔： https: //codepen.io/richiegarcia/pen/QWNYrRN

Answer 2

把它放在你的 CSS 中：.bg&nbsp;{&nbsp; &nbsp;&nbsp;&nbsp;width:&nbsp;100vw&nbsp;!important; }