To set the background color, consider using a style or a css class:
<div class="col-xs-12 col-md-6" style="background-color:red">
</div>
It is not recommended in CSS to have a div override another div that contains it. If you want it to overlap the other div, using z-index would be a better approach.
For more information, check here.
EDIT: Check out Snippet dog for a demonstration of your request.
<div class="container" style="left:400; background-color:blue;opacity:0.8;z-index:-1;">
<h1> here the container starts</h1>
<div class="row" style="z-index:0;"> <!-- the row is in front of the container, which allows elements to flow past the edge of it-->
<div class="col-xs-12 col-md-6" style="background-color:green;opacity:0.8; width:100px; height:200px;">
This div is fully contained, since you didn't apply z index & left to it. It's on the left because you didn't add the float trait to it.
</div>
<div class="col-xs-12 col-md-6" style="background-color:red;opacity:0.8;left:0; z-index:1;width:100px; height:200px; float:right;">
Here the overfolowing div starts.<br> notice how it's partially out of the container.
</div>
</div>
<h1> here the container ends</h1>
</div>