Html 位于引导容器中元素后面的全宽背景？

我已经用Bootstrap3编写了一个非常基本的两列登录页，使用了一个容器

我想让整个页面有两个全浏览器宽度的背景，顶部是一个简单的纹理背景，底部是纯白色，有一个扇形边缘（一个重复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 -->

此处文本
按钮文本

这里还有别的东西

一些文本

这是我从您的设计目标中了解到的最接近的内容。显然，设计只在一定范围内工作，一旦满足这些最小和最大宽度限制，就需要一些设计决策（使用媒体查询）来更改布局

---

为懒惰的风格道歉。但是你明白了，并且可以应用正确的语义。希望此参考资料对您的设计挑战有所帮助。

根据您在此处介绍的内容，很难想象按钮的效果，但是您是否可以使用

bottom:-15px:

将按钮绝对定位到顶部div的底部，其中15正好是按钮高度的一半？如果是这样的话，它将不会响应。该按钮已经在容器和col div中，并且在该div中它位于h1标记之后。我解释对了吗？是的，我完全明白你的意思，只是整个页面上的所有内容都是相对的，都在列内等等。我想它可能会反过来工作，背景完全放在按钮后面，但我不确定如何做到这一点，并让它脱离容器分区？你有什么我们可以看的实况吗？谢谢！这看起来是一个可行的选择。我现在就要用它，让你知道结果如何！再次感谢。我试过了，但我真的不想依靠物体的绝对定位。我找不到脚本，也找不到任何其他解决方案，而且我已经投入了大量的时间试图弄清楚它，所以我不得不使用半个度量，绝对地将背景大致放在容器和按钮后面。这并不理想，但除非有人有另一个解决方案，否则听起来就必须这样做。

<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;}