Hi all,

I designed my site for 1024x786, but with higher resolutions becoming more common, I want to ensure that it looks good across the board.

I use fixed background images for some site sections. An example is here:

http://www.fudomouth.net/getitimage/photogenic.htm

At 1024x768, the bkground fills the entire window, and no repeating can be seen because it's fixed.

However, at a resolution like 1280x1024, the bkgrnd remains fixed but repeats to the right and to the bottom.

Is there a way to instruct the browser to use an alternate (larger) bckgrnd image when higher resolution is 'detected'??

Or, should I simply make my image larger, so that it works for all?? (i don't want to do this b/c then, at 1024x786, only a portion will ever be visible)

Thanks for any help!!

176kB is rather large for a background image.

CSS3 may allow background images to be resized, but browser support will take some time.

You could use a smaller image that tiles.

You could use CSS to center the image, and make it stop repeating. Then you could specify a background color that matches the edge of the image.

Here's a few helpful links I found:

http://www.webdesignerwall.com/tutorials/h...rge-background/

http://www.webdesignerdepot.com/2008/11/do...te-backgrounds/


thanks to Smashing Magazine:

http://www.smashingmagazine.com/2009/10/05...ed/#CSS-Basics8