Is there a way to use max-width and height for a background image?

Question

That simple.

Moving my layout into a fluid territory, working on scalable images. Using the img tag and setting max-width to 100% works perfectly, but i'd rather use a div with the image set as its background.

The issue I'm running into is that the image doesn't scale to the size of the div it's in the background of. Any way to add markup to the background code to set it to 100% width of it's container?

#one {     background: url('../img/blahblah.jpg') no-repeat;     max-width: 100%; } 

Answer 1

As thirtydot said, you can use the CSS3 background-size syntax:

For example:

-o-background-size:35% auto; -webkit-background-size:35% auto; -moz-background-size:35% auto; background-size:35% auto; 

However, as also stated by thirtydot, this does not work in IE6, 7 and 8.

See the following links for more information about background-size: http://www.w3.org/TR/css3-background/#the-background-size

Answer 2

You can do this with background-size:

html {     background: url(images/bg.jpg) no-repeat center center fixed;      background-size: cover; } 

There are a lot of values other than cover that you can set background-size to, see which one works for you: https://developer.mozilla.org/en-US/docs/Web/CSS/background-size

Spec: https://www.w3.org/TR/css-backgrounds-3/#the-background-size

It works in all modern browsers: http://caniuse.com/#feat=background-img-opts