在骨架CSS框架中将背景图像和颜色拉伸到全宽度

Question

我希望创建的背景(图像或颜色)，在浏览器中充分伸展与骷髅CSS网格？http://getskeleton.com -如果你下载骨架，你会看到容器是一个12列流体网格的最大宽度为960 of。因此，如果您想要创建一个报头div并将一个类分配给它以更改该背景图像，那么它将停留在960容器内。浏览器的宽度不会完全变宽。拿出容器外的标头，超过960，你就会打破网格。我希望内容停留在960网格内，但背景延伸到浏览器的边缘-有什么想法吗？

Answer 1

有几种方法可以做到这一点，在不了解您的限制的情况下，我将建议:在容器类之外创建一个额外的元素，您可以相应地对其进行样式设置。与其使用一个完整的页面容器，不如为站点的每个部分、header>container | section>container | footer>container等使用一个容器.

CSS
      .header {
        width: 100vw;
        height: 25vh;
        background-color: blue; }

HTML
      <div class="header">
        <div class="container">
          <div class="row">
            <div class="twelve columns"></div>
          </div>   
        </div>
      </div>

这是骨架演示中使用的方法。看看骨架演示源代码，看看这个方法是如何实现的。

Answer 2

使用绝对定位元素，您可以将背景阻塞到另一个元素中。由于主容器有position: relative，所以必须使用left: 50%;和transform对其进行中心设置。top: 0将使它忽略父容器的填充，但是如果不希望将背景扩展到填充中，则必须将其添加到元素中以匹配其父容器。width: 100vw将使其完全宽度，因为vw单元相对于视图端口。

position: absolute;
width: 100vw;
left: 50%;
top: 0;
transform: translateX(-50%);
background: red;
height: 100%;