Javascript 将背景延伸到屏幕边缘

不知道为什么这么难，但我正在尝试将浅灰色背景延伸到标题屏幕的边缘。看

我尝试使用

background:cover

并在标题

div

之外创建一个

div

。有什么想法吗？注意：这是在WordPress中。也许我应该使用JavaScript或JQuery

我已经试过了：

.bg-wraf {
  background-color: #f2f2f2;
  padding-bottom: 120px;
  position: ;
  width: 100%;
  background: cover;
  height: 120px;
}

---

我建议使用Inspect元素，并查看需要编辑哪些div才能实现这一点。看起来，您希望背景为100%宽度的标题嵌套在其他div中，然后将其限制为其属性。

我建议使用Inspect元素，并查看需要编辑哪些div才能实现这一点。看起来您希望背景为100%宽度的标题嵌套在其他div中，然后您将其限制为其属性。

我检查了您的网站，并设法添加了一个div并应用背景色以达到预期的效果。您需要将背景色

div

置于

容器的外部

div

HTML

---

我检查了你的网站，并设法添加了一个div和应用背景色，以达到预期的效果。您需要将背景色

div

置于

容器的外部

div

HTML

---

背景将仅延伸到元素到达的地方。首先，你必须让元素占据你想要覆盖的空间，然后

background:cover

应该适合你。

背景只会延伸到元素到达的地方。您首先必须让元素占据您想要覆盖的空间，然后

背景：cover

应该适合您。

您遇到的问题是，您的元素位于具有固定宽度的引导

。container

类中：

.container{
宽度：50%；/*1170px在您的站点上，50%用于此示例*/
填充：0 15px；
保证金：0自动；
}
.bg wraf{
背景#f2f2；
填充：10px；/*为清晰起见*/
}

Lorem ipsum dolor sit amet，是一位杰出的献身者。前庭多罗狮子座，暂时大名，无果芸香。在turpis eget laoreet的Fusce pretium。拍卖人risus sed Feigiat，nec mollis Elite dapibus。塞德-欧盟封建主义turpis。维瓦摩斯
塞德·朗库斯·利伯罗。整数cursus nibh ut orci impertium。

您遇到的问题是，您的元素位于具有固定宽度的引导

.container

类中：

.container{
宽度：50%；/*1170px在您的站点上，50%用于此示例*/
填充：0 15px；
保证金：0自动；
}
.bg wraf{
背景#f2f2；
填充：10px；/*为清晰起见*/
}

Lorem ipsum dolor sit amet，是一位杰出的献身者。前庭多罗狮子座，暂时大名，无果芸香。在turpis eget laoreet的Fusce pretium。拍卖人risus sed Feigiat，nec mollis Elite dapibus。塞德-欧盟封建主义turpis。维瓦摩斯
塞德·朗库斯·利伯罗。整数cursus nibh ut orci impertium。

我让它工作了。不确定这是否是正确的方法，但它是有效的

我发现问题是header.php文件中有两个容器

所以我在模板文件的顶部用两个关闭了它们。然后在标题后再次添加它们。与黑曜石所说的类似，但主要问题是不知道容器在header.php文件中

黑曜石几乎指出了这个问题，但没有提到header.php中存在代码的可能性。所以除了他的回答

<?php
/**
 * Template Name: TEST Template.
 *
 * @version 1.0.
 */

get_header('tall');
the_post(); ?>

</div>
</div>

<div>
<div class="col-sm-12 col-sm-offset- bg-wraf" style="background-color: 
#f2f2f2 !important;">
    <?php

我让它工作了。不确定这是否是正确的方法，但它是有效的

我发现问题是header.php文件中有两个容器



所以我在模板文件的顶部用两个关闭了它们。然后在标题后再次添加它们。与黑曜石所说的类似，但主要问题是不知道容器在header.php文件中

黑曜石几乎指出了这个问题，但没有提到header.php中存在代码的可能性。所以除了他的回答

<?php
/**
 * Template Name: TEST Template.
 *
 * @version 1.0.
 */

get_header('tall');
the_post(); ?>

</div>
</div>

<div>
<div class="col-sm-12 col-sm-offset- bg-wraf" style="background-color: 
#f2f2f2 !important;">
    <?php


<?php
/**
 * Template Name: TEST Template.
 *
 * @version 1.0.
 */

get_header('tall');
the_post(); ?>

</div>
</div>

<div>
<div class="col-sm-12 col-sm-offset- bg-wraf" style="background-color: 
#f2f2f2 !important;">
    <?php

<div class="container">
<div class="row">