Focus On Photographic Backgrounds In Web Design

cameraA few years ago, using photographs as a background was the reserve of the daring and those who didn’t worry too much about making their visitors wait while the site loaded. Now with broadband and a good understanding of how to compress image file sizes while maintaining quality, many web designers are using large photographic images as backgrounds for their web sites.

As with all design though, it’s not just a case of slapping something on there and hoping for the best. Designers are using photographs in striking and clever ways.

As the point of most web sites is to communicate information and ideas, it’s vital that the information is both legible and visible. So if you’re using a dark photographic background, you’ll want to steer clear of using dark text. That sounds obvious of course, but sometimes people get excited about using a beautiful image and forget about the information sitting on top.

Another important issue to consider here is that the photographic background has to conform to lots of screen resolutions and monitor sizes. You need to test how the image looks on as many different browser widths as possible, which is not always easy to do. Chris Coyier has a terrific tutorial on how to work with a resizeable background image with CSS.

The examples I’ve picked out below show what I believe to be a strong creative slant combined with sound design principles. Each one has been nicely thought out. There are LOTS of flash sites using this technique so I specifically looked for site built in HTML and CSS for this post.  So without further ado, for your viewing pleasure and inspiration here are ten web sites using photographs as backgrounds.

Lbi Lostboys. This one is quite clever. Each time you refresh the page, a new background image is pulled in from Flickr.

lbi-lostboys

Lonely Twitters. It’s probably best not to look at this if you’ve just broken up with someone. I think it will make you feel more depressed. Nice looking site, though.

lonely

Gavin Castleton has a nice handsome/zombie look going on with his home page.

gavincastleton

Jirnsum has a cool image reminiscent of the famous New York construction workers photographs of Lewis W. Hine.

jirnsum

Isaora, looking mean and moody in black and white.

isaora

The background of The North Face web site changes on each page. Rollover the small “I” on the bottom left of each page to see a full view of the image.

thenorthface

Jansport has a nice rough grungy feel and large background image.

jansport

Coba Hair products use black and white photography for their backgrounds.

cobahair

Upstruct, simple and fun.

upstruct

Frances Hand Built Bikes

frances

Is this a style of web design you like? What other sites have you seen that make good 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.

  • http://www.bryantsmith.com webpage designer

    I’m glad you picked up on this too. It can be a hard thing to accomplish, and actually keep the site looking good. But with some creative XHTML elements / CSS, and maybe even some cute javascript effects it can make an awesome ‘arty’ site. Thanks for the examples too, always good to get new ideas :)

  • Zoe Warne

    Big fan of photography backgrounds and immersive layout. Nice post Jennifer.

    We launched our new site for our digital agency August, I think it was nearly two years ago.

    With a ‘cutting edge at the time’ re-sizable flash background action, CSS and some wicked full screen imagery, we were aiming for impact and I think we achieved it – our development team really nailed it, I can only take credit for the design really, the dev guys made it work.

    Our theme is ‘creative agency with a digital view’ so we wanted to create ‘views’ with landscapes that were both vibrant and poignant. It’s flexible so we can also change it relatively easily, though we probably don’t do this as often as we’d like.

    After being listed in a few ‘best of’ web galleries, our site has been ripped over 500+ times and counting – we figure it’s a compliment, but now we’re looking for our next big idea.

    Feel free to check it out at http://www.august.com.au – and ditto, happy to answer any qs about the re-sizable background, the dev guys in here get asked about it a fair bit, so happy to give a hand if anyone’s stuck.

    Cheers,
    Zoe

  • jeffbach

    I think Starboard, an Aussie maker of standup paddleboards, makes great use of largish images in the background – http://www.star-board.com/ The pics are relevant and do a great job of conveying mood and intent.

    Good article!

    Jeff

  • andy4xu

    I am a new vendor in http://www.clickbank.com. I have launched a software program namely ‘Bluray DVD Ripper’. It lets you:

    • Make backup digital copies of your precious Blu Ray and DVD movies.
    • Convert Blu Ray and DVD movies to digital formats that can play on your favorite portable media player.
    • Rip your favorite scenes from your DVD and Blu Ray movies.
    • Compress movies to fit more of them on your hard disk or portable player.

    As Blu-ray Discs become more and more popular, Bluray Ripper is in urgent need among most of the Bluray discs users. It has a market with the greatest potential and the widest target consumers in the world!

    For the affiliates in clickbank, hurry up to seize the initiative of your own and earn 50% commission. I’m sure it will bring good sale for you! . Come on, and get your wonderful digital life started!

    PS: As I am a new member here, there are no live links and signatures available to me. So please keywords search ‘Blu-ray Ripper’ in the Marketplace at ClickBank to find it

  • http://www.tyssendesign.com.au Tyssen

    While I quite like the look of some of these sites, the technique’s not that flexible. You need to make your image large enough to cover the entire window on larger screens which means that you end up with images with a really large file size. Most of the examples seem to have chosen 1680 as the maximum width which won’t be big enough for some monitors (although it’s likely people with monitors that large won’t have their browsers maximised), although there’s some in there that don’t fill my screen too.

  • Kate Wilson

    Photographic as backgrounds for web is definitely beautiful, but not that functional. Better (at least for business) to keep moderate style for template and decorate it with some outstanding and (most important) useful flash elements.

  • Snapey

    A technique I tried on http://www.borderterrier.org.uk to popular effect. It helps in this case that most of the pictures (a different one on each page) are submitted by the visitors to the site. The site’s owner has to usually mess around with the picture a little to create a background that is wide enough to cope with different browser dimensions.
    The picture scales to match the vertical dimensions of the viewport and has to include more or less of the image dependent upon the aspect ratio.

  • bridgerlandweb

    Photo backgrounds are a design style that I absolutely love and I feel like they’ll be showing up more in the future. Right now, though, there are some technical restraints. There are two good ways I know of to make a good full screen background and they both have their flaws – Flash has load times, and a fixed image can sometimes cause slow scrolling if you use long pages. Of course, a few years ago before high speed connections and better image compression you couldn’t dream of using a photographic background. I think the technology is going to have to keep advancing before this really hits mainstream.

  • wan

    I don’t like this style though. It’s too complex. Too big photo background makes me cannot focus on content in the webpage.
    But this article is interesting :)
    Thank you very much.