Making layers in CSS - html

Question

I have a question that I suspect has a simple answer. I'm using Bootstrap to make a personal webpage, and I'm attempting to divide the background into 3 equal columns (which will all have different images).
I know this could be done with class="col-xs-4" but the issue is that I'd like to keep what's over the background as-is (it's a "col-lg-12" that is responsive).
Is there a way to split my background (again, going to upload images into the 3 panels, and the panels will essentially mask the full images), and still have all the "col-lg-12" heading stuff on top?
Thanks for any help you can give, my current html code is such:
<header>
<div class="container">
<div class="row">
<div class="col-lg-12">
<img class="img-responsive" src="img/picture.png" alt="">
<div class="intro-text">
<span class="intohead">Filler Text</span>
<span class="subhead">More detailed, longer filler text for below</span>
</div>
</div>
</div>
</div>
</header>

Answer 1

Basically, there are three columns with background images, and then a cover div that is placed on top of the three columns. You can place anything you like in the cover div. Here's an article about CSS positioning.
.wrap {
width: 100%;
height: 300px;
position:relative;
}
.section {
float: left;
height: 300px;
width: 33.33333%;
}
.one {
background: url(http://placehold.it/200x300/ccc/666/&text=img+1) no-repeat;
background-size: 100%;
}
.two {
background: url(http://placehold.it/200x300/666/ccc/&text=img+2) no-repeat;
background-size: 100%;
}
.three {
background: url(http://placehold.it/200x300/ccc/666/&text=img+3) no-repeat;
background-size: 100%;
}
.cover {
width: 100%;
height: 100%;
/*A background isn't needed, it's just to show that the element is there*/
background: salmon;
opacity: .5;
/* this stuff is key */
position: absolute;
top: 0;
left: 0;
/* place cover on top */
z-index: 10;
}
<div class="wrap">
<div class="cover">Put all you content in here</div>
<div class="section one"></div>
<div class="section two"></div>
<div class="section three"></div>
</div>
Run the code snippet and tell me what happens. Is this what you're looking for?