Background resize

[Daybreak_0]

Is it possible to have a background image that resizes with the W, H of the containing box? in the CSS stylesheet.



Thanks

[GDS]

the short answer is no.
(But it is of course possible to make a similar behavior with scripting.)

GDS

[Daybreak_0]

Thanks GDS

Thought so, but am always hoping.

For me just as simple to resize the image.

Regards

[DCElliott]

A background image is not resizable, true.

However, you can have an image absolutely positioned above the background layer.

<style>
#background {
display:block;
position:absolute;
left:0;
top:0;
width:100%;
height:100%;
z-index:1;
}
</style>
...
<img src="mybackground.jpeg" id="background" />
would create an elastic background that resizes with the window. If you make it the first element, all succesive elements will be rendered over it since absolutely positioned elements are out of the document flow. (The z-index of 1 should make it the most rearward element, but if another element also has a z-index of 1 and appears first, they are layered in order of appearance)

You don't have to have the image at 100% and can have it anchored in a number of different ways.

DE

[Daybreak_0]

thats perfect - want to put image within the CSS, will check if that will work, but can't see any reason it won't.

thanks DC

[GDS]

This solution will usually distort the background image, as the width /height ratio of browser window usually differ from the image width/height ratio.

GDS