Stretching an image to fill a background using CSS background

I have an image that I like. I would like to use this SMALL image to fill my page but th开发者_JAVA百科e image has a gradient effect so I cannot use repeat. Is there any way I can make it so the image is stretched to fill the page with CSS?

No, you cannot set the size of a background image. You'd either have to use repeat or strech the image itself with a a graphics editing program.

You could also use an workaround with an IMG tag and CSS: Stretch and scale CSS background

I realize this is a rather old question, but seeing as I stumbled upon it, I might as well put an answer here.

It is possible to change the size of a background-image by using the background-size CSS property, like so:

.class {
   background-image: url(....);
   background-size:  100% 100%;
}

Take a look here for more: CSS3 background-size property.