Search code examples
cssimagebackgroundresponsive-designscale

Responsive rescale of background images CSS

I want to build a really small responsive website with an image hover effect which I create with a css background image switch.

My problem is that everything I try to rescale the image it doesn't work. "Background-size: contain" creates a big white block under the image

css

#m2 {
    background-image: url('../p/test.jpg');
    height: 400px;
    margin-left: 16px;
    margin-right: 16px;
    background-size: contain;

}

#m2:hover {
   background-image: url('../p/overlay.png');
   margin-left: 16px;
   margin-right: 16px; 
}

html

<a href="s2.html"><div id="m2"></div></a>

Is this possible with pure CSS/HTML?

Solution

  • Have you tried with:

    background-size:cover;

    ?

    That stretches the image to fit the background.

    About dynamic height and width, you may want to set padding to a percentage. Like padding:20%.

    See here: http://jsfiddle.net/Preben/8by1412u/