Website Background Images

In researching backgrounds for websites, I reviewed an article to understand the best practices and basic principles then looked at examples of innovative and compelling examples for inspiration.

1.  Smashingmagazine.com  Backgrounds in Web Design: Examples and Best Practices 

This article by Matt Cronin states that background images on websites can contribute to a website’s visual impact and interest, while helping to set the theme.  He outlines three common methods for layering background images with foreground content. Going on to discuss placement of background images, Cronin shows examples of placement along the header, overlapping slightly into the content area, and extending throughout the whole page.  A few ways to create interest are to combine texture with illustration, add dimension with 3-D effects, or create a vignette with strong focal point.  His article is full of great examples showing a variety of techniques.

One of my favorite examples from the article is from Webdesignerdepot.com and shows how the background image slightly overlaps the section below.  I’m not sure how this works in CSS, but it looks cool!

2.  Designtutorials4u.com  Websites with Big Backgrounds

These examples show how a large background image can be a dominant focal point and create a dynamic impact.  They seem to have a more minimal layout, which would only work for certain types of websites or maybe just the homepage.

Here’s an example from gazelletouch.com:

3.  Noupe.com  Impressive Website Background Images

This article includes 63 creative examples of the use of background images on websites.  There’s a link to a source of websites where you can use the provided stock images and textures to customize your own background image:  Mashable Background Image Examples.

The example below from viget.com has a watercolor effect that is mirrored from background to foreground, creating a cohesive appearance and artisan flair.

Lastly, a website that I think is unique and inspiring is Trader Joe’s.  The website has a trademark look that is complementary to their product offering.  The background image works well with the other components on the page and contributes to the layered, graphic look.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s