Background image for website- issue with different browser sizes

[joshdesigns]

Hi all,

I have been trying to position a background image for a web page that suits the major browser sizes for my web template.
800X600px
1024x768px
1280x1024px
1600x1200px


(I am familiar with html,css,js to an extent but still learning.) I am wondering how to position the background image using css that will suit all the browser sizes.
The template i have is somewhat similiar to this : http://www.slicejack.com/
i need the background image to fit 100% of the screen size. I am having trouble trying to fit the image for all the browsers.I would appreciate any help.Thanks.

-josh

[vanishdesign]

For that site's example:
You do a wrapper div that's <1000px wide, 920px, 960px, whatever. Make the important part of the background there, and have it fade into a generic color, gradient or pattern.

Then set the body tag's background image to the generic color/pattern.

Want to test how this will look on screens wider than yours? Use the zoom out feature in Firefox.

[joshdesigns]

Thank you vanishdesign for your reply.I get the idea.(the idea with the div is great)
One concern i have is when i create the background image for the body( i usually do in PhotoShop) do i have to set the width,height to a certain parameter to suit all browsers or it doesnt matter since it is going to be a generic pattern.

What if background image of the body was not a generic pattern do you set the width and height to a particular parameter.? Thanks.

[Amonza]

body { background: #/*yourcolor*/ url('/*yourimage*/') top center no-repeat;}

[vanishdesign]

You said you wanted it to look good on 800x600 screens, so I'd start with that. Generally, you should leave about 30, 40 pixels for the scrollbars/windowframe, so the actual maximized browser viewport should be about 770px wide. So you'd want to fit all the important part of the graphic within that width.

Another thing you could do, which slicejack seems to have done, is just make an incredibly wide image, like say 3000px wide, and set background-position: center in CSS. Obviously you will still have to limit the relevant part of the image to a fixed width, and if someone has some massive resolution, they may see it cut off.