将背景扩展到屏幕边缘

Question

不知道为什么这很困难，但我正在尝试将浅灰色背景扩展到标题的屏幕边缘。参见 here。

我尝试使用 background:cover 并在标题 div 之外创建一个 div。有任何想法吗？注意：这是在 WordPress 中。也许我应该使用 JavaScript 或 JQuery?

我已经试过了：

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

Answer 1

我建议使用 Inspect Element 并查看您需要编辑哪些 div 才能实现此目的。看起来 header 您希望背景宽度为 100% 的 header 位于其他 div 中，然后您将受限于它们的属性。

Answer 2

我检查了您的网站并设法添加了 div 并应用了背景色以达到预期的效果。您需要将背景颜色 div 放在 container div.

之外

HTML

<div class="main_content">
  <div class="bg_grey">
    <div class="container">
      <div class="row">
        ..include all your divs that you want inside bg-grey
      </div>
    </div>
  </div>
</div>

CSS

.bg_grey {
  background-color: grey; // your background color here
}

Answer 3

背景只会延伸到元素到达的地方。您首先必须让元素占据您想要覆盖的 space，然后 background: cover 应该适合您。

Answer 4

您遇到的问题是您的元素位于具有固定宽度的 BootStrap .container class 中：

.container {
  width: 50%; /* 1170px on your site, 50% is for this example */
  padding: 0 15px;
  margin: 0 auto;
}

.bg-wraf {
  background: #f2f2f2;
  padding: 10px; /* for clarity */
}

<div class="container">
  <div class="bg-wraf">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum dolor leo, tempor a magna dictum, rutrum sollicitudin nulla. Fusce pretium at turpis eget laoreet. Ut auctor risus sed felis feugiat, nec mollis elit dapibus. Sed eu feugiat turpis. Vivamus
    sed rhoncus libero. Integer cursus nibh ut orci imperdiet pretium.
  </div>
</div>

您可能希望从该容器中 'escape'，然后可能从 .bg-wraf class 内部再次使用 .container class：

.container {
  width: 50%; /* 1170px on your site, 50% is for this example */
  padding: 0 15px;
  margin: 0 auto;
}

.bg-wraf {
  background: #f2f2f2;
  padding: 10px 0; /* For clarity */
}

<div class="container">
    Content padded but no background
</div>
<div class="bg-wraf">
  <div class="container">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum dolor leo, tempor a magna dictum, rutrum sollicitudin nulla. Fusce pretium at turpis eget laoreet. Ut auctor risus sed felis feugiat, nec mollis elit dapibus. Sed eu feugiat turpis. Vivamus
    sed rhoncus libero. Integer cursus nibh ut orci imperdiet pretium.
  </div>
</div>
<div class="container">
    Content padded but no background
</div>

另请注意，您在 .bg-wraf 上有一个 BootStrap 列偏移量 class，不应使用它来获得全宽。

希望这对您有所帮助！ :)

Answer 5

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

我发现问题是从 header.php 文件中转移了两个容器。

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

Obsidian 几乎指出了这个问题，但没有提及 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

...

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

将背景扩展到屏幕边缘

extending background to edges of the screen

html

javascript

css

jquery

HTML

CSS