Creating Impact With Photographic Backgrounds on the Web

As web designers, we generally try to design sites with three main goals:

1. Grab attention

2. Communicate a message

3. Create a lasting visual impression

Sounds simple enough, doesn’t it? Your design and layout plays a big part in determining if visitors will stay long enough to view your content and see what you have to say. By creating visual impact you grab the viewers attention and (hopefully) get them interested enough to read your message.

There are several ways to create visual impact and in the past I’ve written about Contrast, Value and Color which are all very important elements in design. Many skilled designers are using photographic background elements to to create eye-catching sites while not losing the message in the middle. Let’s have a look at some examples. These sites are a mixture of Flash and HTML based sites.

Chicago L Shirts site displays their t-shirts as full-sized background images.

ChicagoL

The Culinaria Food And Wine uses large photographs of food and drink with text overlaid on a semi-transparent white box.

Culinaria

In the Formoda site, the main background image changes in each section. The images are brightly colored yet leave plenty of white space for the main heading and brief message on each page.

Formoda

Future Management And Marketing uses the same photographic image in the background throughout the site. The text is overlaid on a semi-transparent background.

FutureManagement

Each section on the Green Infrastructure site features a photographic close-up a nature scene – leaves, shells, bubbles which complement the text on the page.

Green

Go To China has some beautiful photography. Again each section has its own background image and information appears in a white text box above the image.

Shanghai

My Big Dog Bakery has an unusual collection of background image, but the home page (below) has a sweet old-fashioned image of a girl with a pack of Irish Wolfhounds.

MyBigDog

August Creative Agency

August

What do you think of these sites? Do you like the use of large photographic backgrounds?

Free book: Jump Start HTML5 Basics

Grab a free copy of one our latest ebooks! Packed with hints and tips on HTML5's most powerful new features.

  • JoeB

    I think it would be useful to also point out the accessibility and usability implications of adopting such designs. Can you increase and decrease font size? How do they work across multiple screen resolutions? What if the screen size exceeds the size of the photograph being used for the background?

    • http://www.lunadesign.org awasson

      Yes, when done right there are no more issues with usability than with any other form of web page. If it’s done purely with flash you will run into the usual Flash usability limitations however with some clever javascript and css, you could layer your stretchable image in the background and the screen would never exceed the size of the image.

  • John D

    like the dog bakery one the best.

  • SRM

    I’m a fan of large photographic backgrounds, I was able to use some gorgeous photography for my latest project: http://lgfcupartners.org/

  • victor

    SRM,

    Do you have model releases for the people in the pictures in the site you link to; if not you had better get them or change the pictures as they have to agree to commercial use.

    Victor

    • SRM

      Yes we had custom photography taken for our commercial lending materials and have model releases and full photo rights.

  • http://www.dailymotion.com/video/xa37j3_how-to-make-money-online-3k-a-week_people neubree

    Fabulous looking sites, really effective and simple and not busy, webmasters out there should visit this page.

  • jt

    The Visit Philly site uses large bg photos to great effect: http://www.visitphilly.com/

    However, the images seem to resize with the browser, a neat trick that I haven’t quite figured out.

    Anyone know how they did it?

    • malihu

      @jt
      You can do it with easily with jquery. Check http://manos.malihu.gr/fullscreen-backgound-image-with-jquery

      • XLCowBoy

        It can be done with CSS alone.

      • http://www.lunadesign.org awasson

        XLCowBoy,
        That would be great but how can you get the stretchability with a pure CSS solution?

        * CSS3 has a selector for background-size but only Opera, Safari 3 and Konqueror support it.

      • Zoe Gillenwater

        Re: awasson’s comment below (for some reason I can’t reply to it) — the background-size property is supported without a prefix in Safari 5, Chrome 5, Opera, IE 9, and Firefox 4. Firefox 3.6, Safari 3 and 4, and older versions of Opera and Chrome support it with their browser-specific prefixes. So it’s actually a very well supported CSS3 property.

  • http://www.lunadesign.org awasson

    I really like this concept for some types of websites. I’m just putting together a proposal for a fairly large website that uses this theme of huge full colour imagery in the background. The only usability concern I have is preventing the content from being washed away by the images.

  • http://www.huggykidsbedding.com susu2010

    Using those huge backgrounds are “OK” for smaller website. I would attempt on an e-commerce website or any large websites, where getting information is crucial, the picture are just too distracting. There is a different between designing information and decorating it. All I see in those examples is decoration.

    • http://www.lunadesign.org awasson

      I agree this isn’t a one-size-fits-all design approach… It really depends on your target audience and the industry your are promoting. This wouldn’t be a good design approach for a big news-magazine (although it could fit in a part of it) website or an ecommerce site like amazon but, for boutique industries or specialized services sites, this would be a great way to set a higher standard.

      I could see this direction being used for wedding planners, photography, contractor builders, engineering firms, any sort of designer, clothing, etc… I find it refreshing as long as the images are in the background and don’t make it difficult to access the information on the pages.

  • Anonymous

    Love them!