Widen Your Background Images

It's absolutely amazing to me how many high-profile sites who create a background image that's not wide enough to be viewed by certain monitors. In an attempt to demonstrate this fact, I've modified a background image so you, hopefully, see the yellow bar repeat itself. These sites are, for the most part, brilliantly designed (read: heavy on the graphics) and have few noticeable errors — except for the repeating background bar.

As you know, all background images start tiling (repeating themselves) as soon as the image is finished. What a lot of designers are doing is create a background image that's only 700 pixels, 800 pixels, or even 1000 pixels wide — but it's not wide enough for all monitors on the market. (People designing on Macs are frequently guilty of this sin). If you're going to create a background image like this one, make the width at least 1300 pixels — maybe even 1600 pixels. I'm not sure what the largest resolution monitor cards support today, I just know mine supports a pixel width of 1680 (or thereabouts). If your monitor card has a higher resolution, let me know and I'll post the number here. (A gentleman just emailed me saying he has a Matrox Millenium with a resolution of 1800 x 1350.)

Notice that my text fits in the area before the next bar starts (it may or may not depending on the resolution of your monitor. The reason this happens is because I'm using a table. The second problem with using a background image like the one we're using is people often don't use tables and then the text runs into the border and you often can't read it. Note the heading above — and note the text that follows below the table. It's going to be the same text that's in this paragraph.

Notice that my text fits in the area before the next bar starts. The reason this happens is because I'm using a table. The second problem with using a background image like the one we're using is people often don't use tables and then the text runs into the border and you often can't read it. Note the heading above — and note the text that follows below the table. It's going to be the same text that's in this paragraph.

The award-winning L'eggs site is also guilty. A 41K image of the L'eggs site's violation.

(This text is from Web Pages That Suck)