Search code examples
htmlcssbackground-imageimage

Scale an image with CSS while keeping rounded corners

Can anyone help please?

I have a image that I am displaying on my page. The image has some rounded corners which I have achieved with some CSS trickery. But the problem is now to auto scale the image.

Scaling the image with a <img> is no problem, but using it in for the rounded corners code I have becomes a problem because this is achieved with background-image.

Does anyone know how I can combine the 2?

Here is how I achieve the rounded corners in CSS: 

.informationBarLeft {
width: 24%;
height: 160px;
border: 1px solid #000000;
float: left;
margin-right: 1%;
background-image: url('../Images/pumpkin-soup.jpg'); /*The image to use */
background-repeat: no-repeat;
-moz-border-radius: 15px;
-webkit-border-radius: 15px;
border-radius: 15px;

}

And the HTML is then simply:

<div class="informationBarLeft">&nbsp;</div>

As you can see I dont use the <img> element anywhere, so Im wondering can this be done in CSS?

Solution

  • Use can use css3 background size property to scale background-size: 100% 100%;

    -moz-background-size: 100% 100%;           
-o-background-size: 100% 100%;           
-webkit-background-size: 100% 100%;      
background-size: 100% 100%;