Bootstrap 3 Bleed left and right background images to edge of browser - css

Question

This is what I'm trying to achieve. The top box with a background image that spans the whole browser width, and 2 content boxes inside centered. I've done that no problem.
I then need want 2 more boxes underneath, again centered, but each half needs a different backgkround image that should meet in the middle and bleed of to their respective edge. I am using bootstrap becuase I want these to stack on smaller screens. I can't figure out how this is possible. the black border represents the container. I can wrap the top bit in its own container which is fine, but I can't work out how to get the bottom bit to work, and I don't really want to use absolute positioning because it'll be a nightmare to get the responsive element to work.
Here is what I have so far
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;
}
Checkout this Bootply
I need the top and bottom boxes to line up.
Any help appreciated.

Answer 1

I took you Bootply example and modified bottom bit to this:
<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>
Here's the Bootply modification
Is this something you're trying to achieve?

Answer 2

OK, I've done it. Had to use some media queries.
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;
}
}
Here is the bootply
Hopefully this might be useful to someone else too.