Bootstrap 3向瀏覽器邊緣放出左右背景圖像

Question

這就是我想要實現的。具有跨越整個瀏覽器寬度的背景圖像的頂部框以及居中的2個內容框。我已經做到了這一點沒有問題。

然後，我需要2個以下的盒子，再次居中，但每個半需要一個不同的backgkround圖像，應該在中間相遇，並流血到各自的邊緣。我正在使用bootstrap，因爲我希望這些在較小的屏幕上堆疊。我無法弄清楚這是如何可能的。黑色邊框代表容器。我可以將最高位包裝在自己的容器中，這很好，但我無法弄清楚如何讓底部工作，而且我也不想使用絕對定位，因爲這將是一場噩夢響應元素的工作。

這裏是我迄今爲止

HTML：

<div class="fluid-full"> 
<div class="container"> 
    <div class="row"> 
     <div class="col-md-6"> 
      <div class="example"> 
       <h1>Title</h1> 
       <p>This is a paragraph</p> 
      </div> 
     </div> 
     <div class="col-md-6"> 
      <div class="example"> 
       <h1>Title</h1> 
       <p>This is a paragraph</p> 
      </div> 
     </div> 
    </div> 
</div> 
</div> 
<div class="container"> 
    <div class="row"> 
     <div class="col-md-6 left-half"> 
      <div class="example"> 
       <h1>Title</h1> 
       <p>This is a paragraph</p> 
      </div> 
     </div> 
     <div class="col-md-6 right-half"> 
      <div class="example"> 
       <h1>Title</h1> 
       <p>This is a paragraph</p> 
      </div> 
     </div> 
    </div> 
    </div> 

CSS：

.example{ 
    height: 200px; 
    border: 1px; 
    background-color: rgba(0,0,0,0.8); 
    padding: 30px; 
    border: 1px solid white; 
    color: white; 

} 
.fluid-full{ 
    padding: 40px 0; 
    background-image: url(http://lorempixel.com/1920/400); 
     background-position: center; 
     background-repeat: no-repeat; 
     background-size: cover; 

    } 
.left-half{ 

    border-left: 25% solid transparent; 
    background-image: url(http://lorempixel.com/g/1000/400); 
     background-position: right; 
     background-repeat: no-repeat; 
     background-size: cover; 

} 

結帳這個Bootply

我需要的頂部和底部的盒子排隊。

任何幫助表示讚賞。

Answer 1

好的，我已經完成了。必須使用一些媒體查詢。

HTML：

<div class="fluid-full"> 
<div class="container"> 
    <div class="row"> 
     <div class="col-md-6"> 
      <div class="example"> 
       <h1>Title</h1> 
       <p>This is a paragraph</p> 
      </div> 
     </div> 
     <div class="col-md-6"> 
      <div class="example"> 
       <h1>Title</h1> 
       <p>This is a paragraph</p> 
      </div> 
     </div> 
    </div> 
</div> 
</div> 
<div class="container-fluid about-us"> 
    <div class="row"> 
     <div class="col-md-6"> 
      <div class="sec-title text-center work-with-us"> 
       <h2>Work With Us</h2> 
      </div> 
     </div> 

     <div class="col-md-6"> 
      <div class="sec-title text-center what-we-do"> 
       <h2>What We Do</h2> 
      </div> 
     </div> 

    </div> 
</div> 

CSS

.example{ 
    height: 200px; 
    border: 1px; 
    background-color: rgba(0,0,0,0.8); 
    padding: 30px; 
    border: 1px solid white; 
    color: white; 

} 
.fluid-full{ 
    padding: 40px 0; 
    background-image: url(http://lorempixel.com/1920/400); 
     background-position: center; 
     background-repeat: no-repeat; 
     background-size: cover; 

} 
.about-us .col-md-6 { 
    background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url(http://lorempixel.com/g/1000/400); 
    background-position: center; 
    background-repeat: no-repeat; 
    background-size: cover; 
    padding: 70px 0; 
} 
.about-us .col-md-6 .sec-title { 
    margin-bottom: 0; 
    margin: 0 15px; 
    background-color: rgba(0, 0, 0, 0.8); 
    border: 1px solid white; 
} 
.about-us .col-md-6 .sec-title h2 { 
    color: #FFFFFF; 
} 
.about-us .col-md-6 .sec-title h2::after { 
    width: 70px; 
} 
@media (min-width: 768px) { 
    .about-us .col-md-6 .sec-title { 
    width: 720px; 
    margin: 20px auto; 
    } 
} 
@media (min-width: 992px) { 
    .about-us .col-md-6 .sec-title { 
    width: 455px; 
    margin: 0 15px; 
    } 
} 
@media (min-width: 1200px) { 
    .about-us .col-md-6 .sec-title { 
    width: 555px; 
    } 
} 
@media (min-width: 992px) { 
    .about-us .col-md-6 .work-with-us { 
    float: right; 
    } 
} 

這裏是bootply

希望這可能是有用的人太多別的。

Answer 2

我把你Bootply例子和修改底位到這一點：

<div class="col-md-6 fluid-half"> 
    <div class="example col-md-6 pull-right"> 
    <h1 class="text-center">LEFT</h1> 
</div> 
</div> 
<div class="col-md-6 fluid-half"> 
    <div class="example col-md-6 pull-left"> 
    <h1 class="text-center">RIGHT</h1> 
    </div> 
</div> 

這裏的Bootply modification

這是不是你想達到什麼目的？