Background image size

[stonedeft]

Hello, I'm currently on a project where in my client wants a background image that will span 100% on all screen resolutions. The main content will be a div 1024px width centered on the browser.

css:

body{
background-image: url(/images/myBackground.jpg);
background-position: center
}

#content{
width:1024px;
margin-left:auto;
margin-right:auto;

Question:

what will be the size of my background image more particularly the width? I started with 1600px X 1000px do you think the size is enough? Or I'll make it bigger?

[ralph.m]

I started with 1600px X 1000px do you think the size is enough? Or I'll make it bigger?

That should be plenty for current screens. On smaller screens a lot of the bg image won't be visible, though.

[vinpkl]

also keep in mind that background images dont scale.

so it depends on the kind of background image you are using.

different screen resolutions will show different part of the big background image.

vineet

[AlexDawson]

I would also be careful about sizing, heavy background images often take a long time to load which can be very problematic for designs which are loading on slow Internet connections, generally I would advise ensuring the background image is no larger than 200KB (that seems to be the benchmark average for most "big background" designs). When CSS3 comes along things will be much better because we will be able to scale backgrounds by assigning width and height values to them (so we will be able to scale 100% of the screen) but that's not really something we can rely on as there is little browser support.