Main background is extremely tricky to nail down because unlike print, the monitor size is all different. Monitors can range from 800×600, 1024×768, 1920×1080, 1680×965, etc.. there’s a million different combinations and ratios. So what that means is that it could look wrong on your laptop, but look correct on someone’s laptop or desktop computer, iPad, etc.. there’s a ton of different devices and screen size. This is unlike print when a piece of paper is always 11×12 inches (or whatever size it is) and the ratio is always the same even its smaller like a 3×5″ so you can proportionally scale down.

The industry standard is 1366px x 768px for 2012, but some people would still say 1024×768. Are some monitors higher? Absolutely, all Mac products have higher resolutions than that. But there are also low end Dell machines that are lower than that. So you take the middle ground, you can’t satisfy both parties.

Reference size: http://www.w3schools.com/browsers/browsers_display.asp

Take a look at my screenshot taken right off my screen. Those are my dimensions. Now notice what the screen would be on a lower end monitor or laptop it is in yellow. A person on that screen won’t even see the car because the screen is smaller than the full size of the image, however, if you make the image the size of the smaller screen, then on my monitor you’ll might see blank margins if the picture doesn’t scale proportionally. Most monitors should be scaled 16:9 but its not true across the board.

I guarantee you, you will not be happy. You won’t win it all. Too many different size and factors involved. What looks right on one monitor will look wrong on another.

Let the background image be just that, in the background and not have any super significant meaning. The main area of focus should be the gallery, texts, and menus of your site. Also to make the car show up, you’re going to have to do some Photoshop work and move the car slightly to the right as the area of the actual site is 1000px center screen for a 1366px x 768px but again, on some monitors it will be hidden while on another monitor it will show half the car, and on another monitor you’ll see the whole thing. Just depends on how wide the monitor will be.

Reference Article For More Info
http://www.geek.com/articles/chips/most-popular-screen-resolution-increases-to-1366-x-768-20120411/

Various screenshots taken from different computers. I hope this makes sense since it took a lot of work to gather these images from various friends.

PS: What does your website look like on your screen? Does the car show up? Half of it? All of it? Do you just see skyline?

Try this, take the corner of your monitor and drag it wider or narrower, take notice of these 2 things. See how the image scales so that it stays in proportion? Also notice how the image starts to get chopped of once you get to a certain threshold?

Final thoughts, if you think people viewing your website will have older computers, says within 3-5 years make the background 1024×768. If you think they will have newer computers, then 1366×768. All web images are 72 dpi, in pixels, and in JPG format. For the gallery you’re good for 1000 x 505. You can always find your own dimensions but taking a screenshot on your computer, bring it into your graphic editor and measure the width and height by using the marquee tool. This might save some back and forth.