And strrreeeetch!

December 20, 2010 4:57 PM

What is the best website background dimension to accommodate nearly all screen sizes?

I'm designing a website for someone and it's almost done except for the background. Right now, I'm using a background that is plain except for a large image that hugs the left side of the screen. It looks fine on my computer and my friend's laptops, however on her giant iMac screen, the image on the left appears on the right -- that is, the wallpaper is tiling horizontally. I have no problem with it tiling vertically, as the webpage becomes longer. However I REALLY DO NOT want it tiling horizontally.

How wide (in px) do I need to make the background to avoid this? What is the max resolution available nowadays? I'm worried about making the background too big and increasing the webpage's load time. (I am saving the file as a .jpg).

Also, we do not want to use a repeating 100x100 tile background.

Thanks very much!

posted by joyeuxamelie to Computers & Internet (11 answers total)

Don't worry about size: it's impossible to predict. Instead, tile the background image in only one direction:

body { background-image: url('background-image.jpg'); background-repeat: repeat-y; }
posted by Bora Horza Gobuchul at 5:00 PM on December 20, 2010 [1 favorite]

Response by poster: Won't that make a white space appear on the right side if the screen is too wide?
posted by joyeuxamelie at 5:01 PM on December 20, 2010

Response by poster: The reason I'm asking is because my friend doesn't want the image on the left to appear on the right side. She is paying me a decent amount of money, so it's important that she gets what she wants, y'know? And personally, it's annoying to me aesthetically.
posted by joyeuxamelie at 5:02 PM on December 20, 2010

There are ways you can scale a background image using jquery, for example.
posted by milarepa at 5:11 PM on December 20, 2010

Doesn't have to be white space : you could match the background color of the body to something in the image, to make it appear seamless:

body { background-image: url('background-image.jpg'); background-repeat: repeat-y; background-color: #ff9900; }

Assuming you want to use the full width of the browser, outside of making the background image extremely (2000 pixels + ) wide, (or doing something I find a little silly and ugly, like trying to size it dynamically based on browser dimensions - mliarepa's solution) there's no other way to avoid the problem... the other possibilities, as you've quite correctly pointed out, lead to increased page load times.

Alternatively, you could put everything in a fixed-width <div> to avoid the issue entirely. That's a little complex to explain here, but I have an article on my blog that may prove helpful.
posted by Bora Horza Gobuchul at 5:16 PM on December 20, 2010 [1 favorite]

Use foldtester.com to test your site against common browser resolutions / windows sizes.
posted by Cool Papa Bell at 5:17 PM on December 20, 2010 [2 favorites]

This link may come in handy.
posted by aheckler at 5:28 PM on December 20, 2010

Go with Bora Horza Gobuchul's suggestion. Because take it from me, today's "No monitor in the world can display that resolution" becomes next week's "That's the minimum resolution even my dad's computer makes the background wrap now."

Design for the future! Monitors, they will get bigger. Bank on it.
posted by ErikaB at 7:09 PM on December 20, 2010

Ive never found a JavaScript solution for this that works properly on mobile webkit browsers (iPhone, iPad, android, webos, etc.). The pure CSS route is probably the wisest.
posted by The Lamplighter at 7:33 PM on December 20, 2010

There are numerous LCD models on the market in the 27-30" range that are in the WQXGA or WQHD formats (16:10/2560x1600 or 16:9/2560x1440), so if you wanted to be absolutely sure that it's not going to repeat you'd have to go to ridiculous lengths (no pun intended) such as 10,000 pixels. It is much better to not tile in the x direction and use a solid background color as already explained.
posted by Rhomboid at 12:11 AM on December 21, 2010

There are lots of tricks for getting around this kind of thing. Here, I would make the part that hugs the left of the screen into it's own image (without the expanse of color) and make the background match the expanse of color. The expanse of color is kind of a waste - it makes a much bigger file size and, hence, longer load times.

If the image is a big column (that is, the same thing repeated all the way down the page) you can get even more ambitious and make it the smallest thing you can get while still being tile-able. Then, in the stylesheet, make it y-repeat (like Bora Horza Gobuchul said).
posted by wayland at 2:49 AM on December 21, 2010