Need help using a background image

[deansaddigh]

Hi, i have found a site with a bg image i really like.

I want to use a modified version of it. But how does he ensure that if the user viewing the site is on a different monitor like a wide screen it fills the whole page.

i know that to ensure a background image looks good on all monitors you should fade out the side to a solid colour, and then use a background-color that matches it.

But the image uses a sky and green grass, so i cant use one background color that will match both the sky and grass.

Deary me im terrible at explaining, so i have added an image with details to show you.

Here is the site

http://reservoir34.com/goodies.php#

 

 

[attachment deleted by admin]

[SuperBlue]

There is no way to scratch a background, other then using flash as far as i know.

 

The best method, would be to use additional divisions, combined with z-index and absolute positioning.  You simply cut out the individual elements from the image, I.e. The skies, and then position them on the top of the background using z-index. The images will still be pixel-based obviously, but it will support a much wider range of resolutions, before the skies/images start to get to small.

 

I suggest you use css spirites if you feel motivated to speed up the site further, which would be very much desirable with sites making heavier use of images then normally.

 

Check http://perleporten.dk/ for a basic idea of how to place the skies. You need to create the skies yourself, using Paint.NET. Simply generate clouds, mark up a desirable form with the selection tool, and blur the selection to create some realistic looking skies.

[deansaddigh]

Hi & thanks for taking the time to explain to me in depth.

I will do as you suggested, it seems to me that the link i posted to you, they have just used a massive image width wides, im aware of problems that come with that, But am i right?

is this site using a massive width wise image?