Double background - html

Question

I am trying to achieve the similar display for the highlighted part in the picture with yellow and black background. The three boxes displaying half in the yellow and half in the black bg.
Can anybody help me deal with it in CSS BOOTSTRAP.
Thanks in advance.
http://i.stack.imgur.com/yPj0w.png

Answer 1

The 3 boxes are simply positioned absolutely over a background image.
See this-
#bgbox {
background-color: black;
border-left: 50px solid yellow;
width:50px;
height:100px;
}
#top {
position:absolute;
top:40px;
left:40px;
width:30px;
height:30px;
background-color:blue;
}
<div id="bgbox">
</div>
<div id="top">
</div>

Answer 2

use position for doing this.Demo
<div class="top">
<div class="inner"></div>
</div>
<div class="buttom">
</div>
.top{
position:relative;
width:100%;
height:300px;
background-color:yellow;
}
.inner{
position:absolute;
width:300px;
height:300px;
top:50px;
left:100px;
background-color:red;
z-index:3;
}
.buttom
{
position:relative;
width:100%;
height:300px;
background-color:black;
}

Answer 3

Use the Bootstrap class and arrange the boxes by margin top value . look the code below. run it on full screen
.yellowbg { background-color: #beb333; height: 300px; }
.blackbg { background-color: #000; height: 300px; }
.yellowboxes { height: 182px; margin-top: -118px; background-color: #e3cf00; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row">
<div class="col-xs-12">
<div class="yellowbg">
</div>
<div class="blackbg">
<div class="row">
<div class="col-lg-2 col-lg-offset-3 col-md-2 col-md-offset-3 col-sm-offset-3 col-sm-2">
<div class="yellowboxes">
Box 1
</div>
</div>
<div class="col-lg-2 col-md-2 col-sm-2">
<div class="yellowboxes">
Box 2
</div>
</div>
<div class="col-lg-2 col-md-2 col-sm-2">
<div class="yellowboxes">
Box 3
</div>
</div>
</div>
</div>
</div>
</div>
</div>