Working with Background Images

Recently I was involved in a project where a discussion over the site’s background image caused a lot of debate and confusion so I’ve decided to try and shed some light on the subject.

Disclaimer

I’d like to make it very clear that the following is meant as an aid to clients and as a reminder to developers that we cannot assume that our clients have what may seem to us to be a very basic understanding of technology. As ‘web-experts’ is up to us to be able to explain these topics to our clients and help them assess the impact they might have on their projects.

When it comes to backgrounds on the web, most sites use one of the following:

1. A solid colour
2. An image that can be repeated
3. A single large image or composition that does not repeat

Each of these approaches have their strengths and weaknesses in terms of the design aesthetic they give as well as how they are implemented by the developer.

Google's homepage uses white as a background colour very effectively.

Facebook tiles an image so that even on a 27 inch screen the design is consistent.

Solid Colours

Starting with the simplest as far as both design and implementation goes, solid colours can be very effective on the web and offer a variety of benefits. Solid colour backgrounds work well from a development perspective because they are easy to implement, easy to change, they are flexible and they have little to no effect on page load times whatsoever.

The drawback to solid colours is that they do not always compliment a design and each design will be effected by a solid colour in a different way.

Tiled Backgrounds

Another very common option, using a pattern allows for a more intricate design while also helping to minimize page loads times as a single request can be made for the pattern itself while the actual tiling of the pattern is handled inside of the browser. For example, my site actually uses a single image that is 240 x 242 to create a wallpaper effect.

Patterns don’t have to be traditional either. With the capability to repeat an image along the x or y axis (or both) you can create a lot of interesting variations. A great example of this is the approach I took for the United Way of Oakville’s website. In this case the background image is 1 pixel wide and 700 pixels tall. The image is then repeated along the x-axis to create the gradient effect.

In my opinion I would consider a patterned background to be the middle of the road approach. While you are somewhat more limited in terms of design than a single large image, you can save significantly on page load times and be flexible enough to maintain your design regardless of browser size.

On The Fringe as viewed on a 27 inch screen.

Web Designer Depot viewed on a 27 inch screen.

Single Large Image

By far the most design friendly option, not all websites work well with a single large image for a background. When considering this approach it is important to keep the following in mind:

• Page loads times are increased when more data must be sent from the server to the client. A single large background image can add seconds to a page the would otherwise load almost instaneously.
• When you design a large image as a background you will most likely have an image size in mind. However on the web we have no control over the size of the browser window and without careful consideration a nice background image on one monitor can display poorly on another
• A single large composition can make a website look busy and distract a users eye from what is really important – your content.

NFL’s On The Fringe website uses a single large image that works well provided your monitor is smaller than the size of the image. When viewed on a large enough screen the background image stops abruptly and distracts from an otherwise very nice design aesthetic. On the other hand, Web Designer Depot uses a single large image quite well because on the left, right and bottom the image is a solid colour that matches the rest of the site. The result here is that regardless of monitor size, the design remains consistent for all readers.

Keep The Following in Mind

When it comes to choosing the background image for your site there is no right or wrong answer but rather a variety of different solutions to the same problem. However, to save yourself and your design/development team a lot of headaches, try to remember the following:

1. While your background image may be an important part of your branding, 99% if your visitors are there for your content and few (if any) will ever think as critically about your choice of background as you just have.
2. Unlike other forms of media, the web is unique in that you cannot control the medium in which your content is consumed. Even if you were to design to a common monitor size you cannot guarantee that every end user will view your site with the browser window maximized.
3. Pay attention to page load times. While a background image may not take as long to load as a Facebook widget, adding 200K to the overall page size just for your background may not be necessary.

Sharing is Caring