全宽背景位于Bootstrap容器中的元素后面？

Question

我使用容器编写了一个非常基本的两列着陆页，其中包含Bootstrap 3。

我希望整个页面有两个完整的浏览器宽度背景，顶部是一个简单的纹理背景，底部是纯白色，带有扇形边缘（一个repeat-x背景可能位于底部顶部背景的div）作为两者之间的边界。

但我想要的是背景完全在特定按钮中间的垂直点转换，当然这取决于浏览器窗口和设备（并且布局本身是响应的）。

这甚至可能吗？

我已经绞尽脑汁而且我没有提出任何合理的解决方案，因为容器div不是全宽度的，而是在该按钮上方和下方的一些其他div。

你会怎么做？会喜欢只有CSS的解决方案，但jQuery插件也会很好。

感谢您的帮助！

编辑：某些代码是否有助于说明内容的外观？

<div id="container">
 <div class="row logo">
  <img src="/logo.png" class="col-md-2">
 </div> 

 <div class="row">
 <img src="/images/cookie.jpg" class="col-md-6">

  <div class="col-md-5 col-md-offset-1">
    <h1 class="headline">Text here</h1> 
<button type="button" class="btn btn-lg btn-block">Button text</button> <br />
     Some other stuff here
    </div>
  </div> <!-- main row -->

   <hr> 

    <div class="row footer">
    Some text
    </div> <!--footer row -->
</div> <!-- container -->

Answer 1

这是我从你的设计目标中所理解的最接近的。显然，设计只能在一定范围内工作，并且需要一些设计决策（使用媒体查询），以便在满足最小和最大宽度约束后更改布局。

http://jsfiddle.net/zyglobe/2tQGZ/5/

<div class="wrap">
  <div class="container top">
    <p>Some text ipsum dolor sit amet volutpat condimentum velit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nam nec ante. Sed lacinia, urna non tincidunt mattis, tortor neque adipiscing diam, a cursus ipsum ante quis turpis. Pellentesque molestie eleifend varius. Sed facilisis justo vitae tristique condimentum. Nulla imperdiet nulla vitae augue placerat, ac vulputate nisl volutpat. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
    <img class="bad" src="http://placehold.it/180x200">
  </div>
  <div class="container bottom">
    <button>Button</button>
    <p>Some text at interdum magna augue eget diam. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae. Suspendisse ornare in velit at molestie. Nam eu ligula a sem pulvinar viverra elementum eu ligula. Aenean posuere velit purus, eget luctus eros lacinia ut. Nam fringilla nulla sit amet neque consectetur, id euismod metus mattis. </p>
  </div>
</div>

图像和按钮需要相对于顶部和底部容器之间的边框定位。其余的内容需要知道这个空间，并且永远不会与它相交。

button {position:absolute;top:0;right:0px;height:40px;padding:0 20px;margin:-20px 40px 0 0;}

img.bad {position:absolute;bottom:-100px;left:14px;z-index:500;}

.top {padding:20px 10px 30px;}

.bottom {padding:30px 10px 20px;}

为懒惰造型道歉。但是你得到了这个想法并且可以应用适当的语义。希望此参考有助于您的设计挑战。