CSS property / Image size

Question

Hi,

i am learning web designing this days and come across the following problem, it will be my pleasure if you can solve it.

While designing a site i placed an image in background it looks nice on my system but on other big screens image looks small and shows white space around it so all that i want to know is what size of image i should select and what properties of css i need to apply?

for more infomation i am using 15" computer screen n problem occurs when i view my site on 17" system.

Waiting for your reply.

Answer 1

Your 15" screen is probably running 1024x768 resolution which is fairly small compared to the most common monitor sizes you will come across. I did a quick check in Google analytics for the most popular browser sizes wider than 1024x768 and came up with these common sizes -

1280x800 (typical widescreen 15" laptop) 1366x768 1280x1024 (typical q7" and 19" monitor) 1440x900 1680x1050

What I usually do is select a pretty large image, then do a radial gradient fade to the background color. Depending on the complexity of the image, I will often use an image that is 1600px wide so that it covers all but the very largest screen resolutions. Then place the image centered at the top of the page. Here is the CSS -

BODY{background:URL(image/url/goes/here.jpg) center top no-repeat;}

With a little practice you should be able to make the image blend in to the background nicely so it looks good on very large screens as well.