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;
}