I design my sites in 1024x768 and just have the outer edges (as they appear on widescreen monitors) in a "background color". Is there some recommended way to lay an image so that it will fit the edges evenly in both 16x9 and 16x10 screens? Any advice or a link to a tutorial greatly appreciated.
There are a few ways to achieve this. I think to most common way is to create a background image that is equal tothe largest screen size you want to target and then center it on the body so that smaller resolutions will simply cut and center the image but larger resolutions still have enough to not be left short. Alternatively your looking at javascript trickery! Take a look at this jquery plugin: http://buildinternet.com/2009/02/supersized-full-screen-backgroundslideshow-jquery-plugin/ There are more around but this one is pretty handy.
Simply add this to your css file: body{background:#fff url(your_photo.jpg) center top repeat-x} This will center the foto horizontally and repeat it vertically. Works for all resolutions.
I agree with this. However, it can become more complicated than that if your page incorporates gradients and things like that in the style. You need to design the webpage for a certain resolution and then anything above that needs to be repeated so that the outer edges look right when being viewed with a larger resolution. I recommend designing for the 1024x768 because I'm confident that this is the most widely used resolution right now.