Twitter bootstrap - DIV absolute positon to an image responsive enlarging - html

Question

I have an image as a background with a div overlaying it. I'm trying to find ways to make it responsive and cover more of the picture as it gets smaller. I'm tried the below but I don't think even the column classes are doing what they are supposed to do.
<div class="row">
<div class="col-lg-12 col-md-12 col-xs-12"
<div id="test-container">
<img src="images/productsplash.jpg" alt="Home Page" class="img-responsive"/>
<div class="row">
<div class="col-lg-4 col-md-9 col-xs-12" id="products-container">
<div class="op-container col-lg-12 col-md-12"><h1>OUR PRODUCTS</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisiut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu</p>
</div>
<div class="col-lg-6 col-md-6" id="button-good"><p>Good <br>Products</p></div>
<div class="col-lg-6 col-md-6" id="button-bad"><p>Bad <br>Products</p></div>
</div>
</div>
</div>
</div>
#test-container {
position:relative;
display:inline;
}
#products-container {
position:absolute;
min-width:30%;
max-width:40%;
top:35%;
left:55%;
background-color: blue; /* currently missing opacity css*/
}
I had a thought of using media query to override the css for #products container. Couldn't get it to work. I essentially want it to cover half the div at something in the tablet range size and then overlay the picture completely.
Any thoughts on how to tackle?

Answer 1

You might putting the image as a background-image to a div, and setting the background-size to cover or contain.
The div should have the same classes as the covering div eg: col-lg-4 col-md-9 col-xs-12
Something like
HTML
<div class="col-lg-4 col-md-9 col-xs-12 responsive-image"
style="background-image: url(/dynamic/image/url.png)">
</div>
CSS
.responsive-image {
background-size: cover; /* or contain */
background-position: center center;
height: 300px; /* or 25vh - 25% of viewport height */
}
The only drawback is that you have to control the height of the image div, because on its own it won't automatically expand to best fit the image
Also see viewport units compatibility