0

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?

Clam
  • 935
  • 1
  • 12
  • 24

1 Answers1

2

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

Matyas
  • 13,473
  • 3
  • 60
  • 73
  • I sorta tried that as my first method but had issues with being able to make it responsive... – Clam Apr 11 '14 at 07:48
  • hmm.. a thought. is there a way to shift things down "rows" in boostrap easily. i know you can offset columns. do you know? – Clam Apr 11 '14 at 08:19
  • Put them in a container like: `container(row, row2)` and make `container` `position: relative;` and `row2` `position: absolute; top: 0; left: 0; right: 0;`. this should put `row2` above `row`. – Matyas Apr 11 '14 at 09:16
  • If you provide a JSFiddle I'd help you out on a concrete example – Matyas Apr 11 '14 at 09:17
  • well i would want row 2 to sit below row1. probably a stupid question, can i simply use a margin-top to push it down? I'm doing it by %. I'm doing that now but not sure of the drawbacks – Clam Apr 11 '14 at 09:28
  • `margin-top` handles `%` values in a weird way. Basically `margin-top: 100%` is equal to the `width`. See this question: http://stackoverflow.com/questions/7266363/margin-top-percentage-does-not-change-when-window-height-decreases – Matyas Apr 11 '14 at 09:31