Question

我想用背景图片填充主页块。

.testTop{
  background: url('/Images/Background/HERO Img.png') no-repeat center center fixed; 
 -webkit-background-size: cover;
 -moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
background-attachment: fixed;
}

到目前为止，我可以用这个css制作一个在每个设备重新缩放时都能正常工作的图像。但我不能让它覆盖bootstrap css容器。所以我不能使它适合整个块宽度。有谁知道我怎么能覆盖它？

编辑：

所以我想我需要展示一下我正在做的事情。

HTML

 <html>
    <body>
      <div class="contianer">
        <section class="testTop">
          Fullside background image
        </section>

        <section>
          normal block with text
        </section>
      </div>
    </body>
 </html>

所以我希望带有“testTop”类的部分是一个完整的背景图像。但我得到了bootstrap容器填充。我怎么能删除这个？

谢谢你的时间。

Answer 1

如果您不想永久更改课程container的样式，请创建一个包含padding-left: 0;＆amp;的新课程。 padding-right: 0;并将其添加到类container旁边，如下所示：

<html>
    <body>
      <div class="contianer remove-padding">
        <section class="testTop">
          Fullside background image
        </section>

        <section>
          normal block with text
        </section>
      </div>
    </body>
 </html>

然后在你的CSS中添加padding: 0;和margin: 0;

.remove-padding {
   padding: 0;
   margin: 0;
}

或者，如果您希望样式应用于整个站点中的所有.container类，只需添加以下内容：

.container {
    padding-left:0;
    padding-right:0
}

我希望这能解决你的问题！

使背景图像适合屏幕，覆盖bootstrap css padding

1 个答案: