Stretch and Scale CSS Background

Question

Is there any way to get a background in CSS to stretch or scale to fill its container?

Answer 1

In one word: no. The only way to stretch an image is with the <img> tag. You'll have to be creative.

Answer 2

Not currently. It will be available in CSS 3, but it will take some time until it's implemented in most browsers.

Answer 3

There's definitely no way to do it in css.

You could create an image tag and it set its z-index to be behind the item so it is a background image. Then you can use two lines of javascript to set the height and width of the image once the page is loaded.

Answer 4

Define "stretch and scale"...

If you've got a bitmap format, it's generally not great (graphically speaking) to stretch it and pull it about. You can use repeatable patterns to give the illusion of the same effect. For instance if you have a gradient that gets lighter towards the bottom of the page, then you would use a graphic that's a single pixel wide and the same height as your container (or preferably larger to account for scaling) and then tile it across the page. Likewise, if the gradient ran across the page, it would be one pixel high and wider than your container and repeated down the page.

Normally to give the illusion of it stretching to fill the container when the container grows or shrinks, you make the image larger than the container. Any overlap would not be displayed outside the bounds of the container.

If you want an effect that relies on something like a box with curved edges, then you would stick the left side of your box to the left side of your container with enough overlap that (within reason) no matter how large the container, it never runs out of background and then you layer an image of the right side of the box with curved edges and position it on the right of the container. Thus as the container shrinks or grows, the curved box effect appears to shrink or grow with it - it doesn't in fact, but it gives the illusion that is what's happening.

As for really making the image shrink and grow with the container, you would need to use some layering tricks to make the image appear to function as a background and some javascript to resize it with the container. There's no current way of doing this with CSS...

If you're using vector graphics, you're way outside my realm of expertise I'm afraid.

Answer 5

Scaling an image with css is not quite possible, a similar effect can be achieved in the following manner though:

Use this markup:

<div id="background">
    <img src="img.jpg" class="stretch" alt="" />
</div>

with the following css:

#background {
    width: 100%; 
    height: 100%; 
    position: absolute; 
    left: 0px; 
    top: 0px; 
    z-index: 0;
}

.stretch {
    width:100%;
    height:100%;
}

and you should be done!

Answer 6

An additional tip for SolidSmile's cheat is to scale (the proportionate re-sizing) by setting a width and using auto for height.

Ex:

#background {
    width: 500px;
    height: auto;
    position: absolute; 
    left: 0px; 
    top: 0px; 
    z-index: 0;
}

Answer 7

This is what I've made of it. in the stretch class I simply changed the height to auto. This way your background picture has always got the same size as the width of the screen and the height will allways have the right size.

#background {
    width: 100%; 
    height: 100%; 
    position: absolute; 
    margin-left: 0px; 
    margin-top: 0px; 
    z-index: 0;
}

.stretch {
    width:100%;
    height:auto;
}

Answer 8

#background {
    background-attachment:fixed; /*add this*/
    width: 100%; 
    height: 100%; 
    position: absolute; 
    margin-left: 0px; 
    margin-top: 0px; 
    z-index: 0;
}

.stretch {
    width:100%;
    height:auto;
}

Answer 9

Great code, exactly what I was looking for. It's especially useful when everything in your page is contained in a wrapper div. All you have to do is add:

position: relative;
z-index: 1;

to #wrapper, and it works like a charm.

Thanks a lot.

Answer 10

Use the background-size attribute in CSS3:

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

Answer 11

NONE of this worked for me. Im using a background that has a gradient and shapes embedded so tiling is not an option. I need it to grow or shrink to the viewers screen size. I used #background { width: 100%; height: 100%; position: absolute; margin-left: 0px; margin-top: 0px; z-index: 0; }

.stretch { width:100%; height:auto; } And it did NOT stretch HELP!!! PLEASE!!