Last Updated Please share our content if it is helpful

There is a definite trend for flat design at the moment, but not all customers want this and there is still a place for designs that use backgrounds to great effect. Adding a background image can bring your website to life and can turn a good design into a stunning one.

Background is the Key Focus of the Design

Whether the foreground is semi-opaque, almost completely opaque, cut away in the masthead, or only covers part of the screen, these designs would not be so effective without the background images:

1 Surface Beauty (www.surfacebeauty.co.uk)

surface beauty
With this Surface Beauty site where the greyed out background of a beautiful woman provides the key visual and combines with a semi-opaque foreground to make a classy site.

2 Alexander Prestige (www.alexandersprestige.co.uk)

alexanders
The gleaming cars in the background form the masthead visual and give an impression of class.

3 Amelia Earhart (www.ameliaearhartbook.net)

Amelia Earhart

The photo of Amelia Earhart overlaid on top of clouds and sand tells the viewer immediately what the site is about. The prominent copy of the biography draws attention to the main purpose of the site – to sell the book.

4 Power On Power Off (poweronpoweroff.com)

Power on Power off screenshot

 

The background here is subtle, and the foreground takes the form of two semi-opaque circles rather than the conventional rectangle, but the faces behind the two circles add visual detail and interest to the design.

Side Images to Expand the Width of the Design

For websites that still use fixed width rather than responsive designs, we are currently in a changeover period between 960px and 1200px width sites – W3Schools statistics  show that – as of January 2014 – 6.5% of users still have screen resolution of 1024 pixels or less. In addition, many mobiles will display websites up to a width of 960 pixels without horizontal scrolling but will cut off text or images beyond this point.

In order to accommodate these users whilst still providing a good visual experience for the majority of PC viewers with wider screens, images to the side can be used to add interest.

5 Grease (www.greasethemusical.co.uk)

Grease

The hearts, the shocking pink and the photos of the stars to the side all add a sense of vibrancy to the site – as does the short video in the masthead section.

6 Bahama Food (bahamafood.com)

Bahama Food

The beautiful photo of the Bahamas sea and sand entices the viewer in way more than just a plain blue background.

7 Evergreen Estate (evergreentruganina.com.au)

Evergreen Estate
The green bamboo-type image gives a pleasing natural feel to a website advertising nature reserves and parks nearby and obviously ties-in with the company name.

8 Almera (www.almera.bulgarian-homes.com)

Almera Complex)

The gold scroll-work adds class and visual interest to this web design.

Side Images Used to Give Additional Information

9 TU (www.tanyaburr.co.uk)

tu

The clever website background blends into the masthead; the items for sale add visual interest and prompts the viewer to buy.

Background Images Set the Tone for the Site

10 Boom Cycle (www.boommybody.com)

boom cycle

The grunge background adds a street edge to this indoor cycling web design.

11 Living Springs (livingsprings.co.uk)

living-springs

The hand-drawn trees, rainbow and children’s park add visual interest; the urban park within the natural surroundings reinforces the charity’s aims of helping troubled families and young people. The hand-drawn aspect of the background suggests that the charity is not wasting money on expensive artwork.

12 The Suffolk Barn (thesuffolkbarn.co.uk)

suffolkbarn

The image of the cereal field creates the impression that this B&B is in the middle of the countryside and makes it look more attractive; the semi-opaque foreground allows the background to show through.

13 Stagecoach (www.stagecoach.co.uk)

stage

The starry background adds an appropriate sparkle to this “training ground for stars”.

14 Clever Crafts (www.clever-craft.com)

Clever Crafts

The pastel background adds an appropriate backdrop to a craft website.

Subtle Interest

Backgrounds don’t have to be striking to enhance a design; even subtle backgrounds can add a quiet feeling of quality to a site.

15 Chemical Heritage Foundation (www.chemheritage.org)

Chemical Heritag Foundation

A subtle, appropriate website background enhances this site.

 

 

Please share our content if it is helpful

Tags: