Five killer ways to use background imagery

Higher broadband speeds mean it's now possible to use full-scale background imagery that makes your site sing, says Matthew Smith. Find out how to use it to add an emotional punch and nuance to a design but be cautious when employing this style

Using big, bold imagery as a background for content can give a powerful look to a site in need of strong presentation.

For the majority of our short web history, the large file sizes of full-scale  imagery have made it a poor choice for websites. Now, with the advent of high-speed broadband, that obstacle is  slowly disappearing. While it’s still best practice to keep sites lightweight, large-scale imagery  is a viable option when you need an emotional punch.

Often, web patterns are drawn in lines and boxes – and are therefore experienced as  manufactured and digital. Imagery can add nuance to a design, giving it an organic or artistic  feel. The tone of the pictures can be used to enhance the mood, and changing the imagery per  section or page can be a nice way to keep the site fresh.

I recommend using imagery that has an atmospheric or blurred presence, so that it doesn’t distract from or interfere with the internal content. Adding a semi-transparent pixel overlay can  give the design a nice blend of the organic and digital. The overlay has the extra bonus of  diffusing the pixellation caused by JPEG compression, enabling you to save the images at a  smaller dimension.


However, a word of caution. Background imagery should strictly be used as part of the style layer, and not as an essential piece of the content. It should be an adjunct to great copy and  strong contextual imagery (within the page), and usually shouldn’t heavily influence the user  interface.

Although high broadband speeds are on the rise, they’re by no means ubiquitous. Your  audience or clients may need lightweight sites that don’t allow for full-scale imagery. Do your  homework first so you don’t frustrate your users.

Here are five examples of some excellent background imagery. Hopefully they can inform and inspire your next project.

Five examples to check out

1. Sourcebits A great example of an atmospheric background image that adds wonder to an incredible portfolio can be found at the website of mobile development company Sourcebits.

2. Fox Classics The Fox Classics website has an incredibly flexible design. Background imagery is used to showcase a shot of the actor being featured on the page.

3. Rebecca Barry The site of director, writer and producer Rebecca Barry uses a subtle  semitransparent pixel overlay. The pattern helps disguise any pixellation from the image compression of these large photos.

4. Chicago L-Shirts The site of Chicago L-Shirts plants a bold, white Helvetica font on top of  the showcased product. This works because of the layout of the photograph, but would fall apart if there wasn’t a large open area for the type.

5. G2 Giving a quick introduction to the ambience and flair of the Texan restaurant G2, this site  ( uses a photographic background to draw you in.

What are you favourite sites using full-scale background imagery? Let us know in the comments. It would be interesting to know which other sites get background imagery right.

Log in to Creative Bloq with your preferred social network to comment


Log in with your Creative Bloq account

site stat collection