This is a common issue I notice with a lot of “big brand” websites and amazes me that they don’t test their backgrounds on a range of screen sizes.

What are background images?

Background images can give a website a nice canvas and are often used to promote offers or to add a temporary theme to a website (Christmas is a common one – you might have seen ours!)

With improvements in internet speeds more and more websites are using large images rather than small repeated graphics or solid colours.

What often amazes me is the obvious lack of time spent in producing them, and more often than not, a clear lack of effective testing before launch.

Web development thresholds…

It is often common a web team will have thresholds for various factors such as browser type, page size (in kb), use of flash elements, screen sizes, within which they work, and providing they are serving a certain percentage of their potential audience (say 90%) then decisions are passed. But with this one the fixes are so simple there is no need to let a sloppy background slide!

An example: Everton FC

Take the current Everton FC’s site below: (click for a larger version)

The site has a nice Christmas theme but they haven’t tested it on a larger screen size.   Now I know we don’t all have 2560 pixel width screens, and “most” people wont see it, but based on our Google Analytics stats more than a few will, and the few are growing in numbers. (6% of visitors to our website has screen sizes with a higher pixel width of 1930px – so just over 1,000 in the past 30 days)

Solutions

The current background is 1930 pixels wide so they have covered the majority but there are simple options to avoid the ugly edge…

1. Use a repeatable graphic - should the background have been uniform, then a repeat could have been used to avoid the edge.

2. Use a fade out – The background graphic could have been faded out at the edges (like the have done for the height) This takes just minutes to do, and would have meant no ugly edges.

Other examples…

Now I’m not picking on Everton! this is just one of a load of examples I have seen in the past few days, below are a few more…

Accessorize – Could have used a repeat so easily!

HMV – Nearly got it right but you can still see the line!

Manchester City – Could have faded it out! (BTW this is my favorite football club site so its not all bad)

Land Rover – Needed to fade to the sides!

Blockbuster – Needed to use a repeat or a fade!

These screen shots are all as of today and are property of their prospective owners (16/12/2011)