LearnCreating Responsive Websites with Photo Backgrounds

   
Avatar

Jake Rocheleau
writes on January 14, 2013

The trend of large photographic backgrounds has become very popular in recent years. The improvement of Internet connections has allowed more data transfer per second, which means images can load a lot quicker in real-time. There are also plenty of open source scripts out there for generating cross-browser support using fixed photo backgrounds.

In this guide I want to discuss a few trends and possible techniques for creating responsive image backgrounds. There are more than enough examples we can look into which all demonstrate a unique method for website interfaces. Even consider the possibility of sliding background images or animated video BGs. As frontend dev techniques become more consolidated it will be easier to build these very complex layout styles with fewer and fewer lines of code.

Adapting the User Interface

One great use of responsive background images would be to wrap around the UI elements in your page. This is common in design portfolio layouts, and also in smaller landing pages such as mobile applications. The webpage for Fifty Three app uses this exact technique which displays an iPad in the background.

Fifty Three iOS iPad app website layout

You can then play a small demo video right from the iPad screen which is embedded through Vimeo. What is neat about this example is how the photo really is fully responsive, and you can adapt the browser window to fit any width/height. All of the text and app store links will read just perfectly.

It is also worth noting how each page in the website is following the large responsive background technique. As you browse through their navigation links at the bottom you’ll catch a different photo embedded into each page. Some examples include the blog, company info, and jobs sections of the website.

Responsive Photo Slideshows

Believe it or not we could push the large photo technique to include types of dynamic content, as well. There are some jQuery plugins which allow fullscreen image slideshows using just a few lines of code. We can see a fantastic example on Royale’s homepage which features many of their past client work.

Royale web design agency studio website big photo background

Being a creative person myself I still vouch for the enormous progress we have seen by other designers in the field. Many of the portfolio and studio websites I find online are still the best examples of newer design trends. And I feel that Royale demonstrates this slideshow effect in a brilliant yet elegant manner.

Portfolio Works

Similar to the example above I just had to reference this next website as a related case study. Ben Thomson Photography is the online portfolio showcase of Ben Thomson. The homepage layout begins with a background slideshow of panning images he has taken from previous clients.

Ben Thomson Photography studio website portfolio

This is another brilliant effect which many photographers do not consider. Probably because this type of design is not the easiest to implement. Many artists would not have the frontend development skills to produce such a website on their own. But I feel that Ben’s website certainly draws your attention, and still appears very professional in regards to other possible competition.

It is also worth noting that he doesn’t have the photo effects displaying on every page. From the first time you land on the homepage you’ll see this sliding photo effect. But going through his previous works of clients offers a grid-style thumbnail showcase. I greatly appreciate how this has been conceived where the background photos don’t get annoying or interfere with the larger website interface.

Build an Emotional Connection

Grodd Advertising is a very strange website layout which I have grown to love. By using a background photo related to a typical location(inside a cafe/diner kitchen) it draws in curiosity from visitors almost instantaneously. When first landing on the page you can recognize this isn’t just some ordinary layout. And yet all the content you need can be found right on the page, basically no navigation required.

Grodd Advertising website big photo background screenshot

This connection is difficult to bridge from your computer screen into the hearts of your visitors. You need to provide some type of meaningful imagery to make them feel more “natural”. Many times photography will look staged, as it often is to get the best quality picture. But sometimes using offbeat photos of strange locations may catch the eye even more frequently.

Fullscreen Video Backgrounds

I had to find a way to squeeze in this technique because of the rise in popularity. Five or ten years ago it would have been very difficult supporting a video background display. Many users were still on 56k modems and it would have taken minutes or possibly hours to finish buffering.

The bigger problem we face today is getting video formats which support all of the mainstream browsers. It is possible to solve this by adding all the typical formats you would want(mp4, ogv, webm) along with a Flash .flv fallback. Consider the Valentino website which uses a large fullscreen video effect on their homepage. This looks fantastic and is provided through a natural Flash video player, automatically resizing to fit the whole screen.

Valentino website background photo image video player

I can’t fully recommend video backgrounds for each project you want to implement. In some cases it is obviously easier to stick with one large photograph, or even a slideshow with 2-4 photos at most. Videos consume a lot of resources on both the server end, along with the user’s end. So if you do choose to go this route spend some time researching the best methods. Ensure you have a large enough resolution to have the video stream quickly without appearing as poor-quality on some of the larger monitor displays.

Live Demo Showcase

Before wrapping up I would like to share a brief collection which holds more fullscreen photo websites for inspiration. Web designers and developers are generally looking to build the same type of products, yet we vary in skillset. It is my hope this article coupled with a showcase gallery may provide the perfect solution to newcomers just getting started with fullscreen responsive background photos and videos.

Adidas Design Studio

Adidas Design Studio website layout 2012

5emegauche

5emegauche website layout fullscreen background photo

Heart’s Cry India

hearts india charity website layout big photos

The Paper Mill

2012 The Paper Mill website layout

The Kitchen Community

The Kitchen Community website layout 2012

Banger’s

top beer hopps website austin texas layout

X-Doria

xdoria website big photo background layout

Rochester Made

web design agency rochester made layout

Working Element

Working Element website layout design photography

The Old Barber Shop

old barber shop website layout photos

Vivacitas Media Agency

vivacitas website layout big photos

Circles

circles meetings for creative people website

Book of Beards

the book of beards website layout big photos background

Epok Design

Epok design website layout big photos

Danish Crown

danish crown red website layout big photos in background

Twenty8 Twelve

design fashion studio twenty8 twelve layout

Ben Thomson Photography

Ben Thomson website layout design portfolio

Friendly Gents

fancy website layout moustache gentleman designers

Chicago L-Shirts

chicago tshirts lshirts website layout ecommerce

Sean O’Brien

Sean O Brien website layout background video

Formrausch

Formrausch website layout design portfolio

Damien Hirst

Damien Hirst website layout big photographs

Knoed Design Studio

Knoed website layout design background photos

Planet Propaganda

planet propaganda website big photographs background

Cappellos

Cappellos website layout interface backgrounds

Oh Land Music

ohland music website layout background photos

Parachute Journalists

big photo backgrounds website layout journalism

Kristo Friseure

kristo website beauty salon layout design

GET STARTED NOW

Learning with Treehouse for only 30 minutes a day can teach you the skills needed to land the job that you've been dreaming about.

Get Started

2 Responses to “Creating Responsive Websites with Photo Backgrounds”

  1. In my website business we have recently started offering single page sites for startups or small businesses that don’t have the need nor budget for anything complex. The approach to single page site design is uniquely different. A background photo that is stunning, responsive, and on topic is a critical element.

    Great article, Jake.

  2. Not a big fan of large images.

Leave a Reply

You must be logged in to post a comment.

man working on his laptop

Are you ready to start learning?

Learning with Treehouse for only 30 minutes a day can teach you the skills needed to land the job that you've been dreaming about.

Start a Free Trial
woman working on her laptop