Background image stretch?

[brussell78]

Tweet

Hi, I am trying to find out whether, if I use a background image, it's possible to have the image stretch to the resolution of the viewers browser. I have tried using:

background:url(RosesBgd02.jpg) no-repeat center;

with the css but it only centers the image - The image is currently 800x600 so therefore any browser over this has a nasty border around the background picture. I know that I can put a background colour but I would prefer to not have this, and have the image stretch to the edges. Any clues please?

My HTML isnt great so please in english terms

Thanks in advance

[Paul Wright]

Hiya, unfortunately the css background property doesn't take height/width dimensions so there's no quick fix for this one. The only way i can think of is to set the image within a div tag then change the z-axis so it sits behind your content. I would check browser compatibility though as this is a bit of a cheap hack.

You could try something like this I guess.

<div style="width: 100%; height: 100%; left: 0px; top: 0px; position: absolute; z-index: 0;">
<img src="image.jpg" style="width: 100%; height: 100%;">
</div>

Always better to resize the image in an art package though so you're starting off with the correct proportions.

Cheers
Paul.

[Donk]

I think the only way you could do it would be by using the JavaScript onResize() function.

I have got round it on a site I am designing for a customer by using an <img src="whetever.jpg" width="90%"> tag. This site look similar in all screen sizes from 1600 *1200 to 640 * 480

View the source to get some ideas.

bob

[eskimo]

You could use some kind of screen resolution detection script, then load the appropriately sized background image through a stylesheet.


By the way the bbc have some kind of background image magic going on.
http://www.bbc.co.uk/bbctwo/

[brussell78]

Thanks for the responses, knew you'd have the answer.

I will have a play about with all the options and see what works out best.