Create Stunning Homepages using Photo Backgrounds

Treehouse recently received a massive redesign and part of that included a new homepage. Our design team hired a photographer to shoot beautiful background photographs that span from edge-to-edge.

Screenshot of the Treehouse homepage. It's a photograph of a woman in a coffee shop using a laptop. The text on the page says "A better way to learn technology. Learn how to build websites & apps, write code or start a business."

Treehouse uses large photographs in the latest update to the homepage.

Why Photography?

The use of photo backgrounds on webpages has been gaining popularity and there are plenty of reasons why. From a technical perspective, higher resolution screens and increased bandwidth have removed a few technical hurdles. In the past, this type of thing wouldn’t have been very practical. However, we shouldn’t do things just because we can, so then why use them in our designs?

Photos of your product and people using it play on the customer’s empathy in ways that colorful layouts and illustrations cannot. It helps them identify with the product and visualize themselves in the same context. On the Treehouse homepage, the woman at the coffee shop on her computer and the man using his iPad outdoors are small vignettes that demonstrate how Treehouse fits into everyday life. For example, if the pictures instead featured children playing with their pets, it would paint a very different and confusing mental model of what Treehouse is all about. These types of photos are a form of storytelling, which helps to personify the product and make it relatable. Making them span the entire width of the browser window adds to the immersion and transforms the page into a place, if you will.

Contrast is Key

When designing with photographs, it’s common to overlay text and other UI elements. The composition of elements is important, but it’s even more important to watch the contrast between the photos and the overlays. If it’s a very bright image with a background that’s closer to white, you should go with dark text. For example, the Apple homepage frequently uses images with pure white backgrounds, so black text makes sense. If your photograph has mostly dark areas, then do the opposite and use white text.

Screenshot of the Apple homepage. It features an image of an iPad and says "iPad Air - The power of lightness."

Apple uses white backgrounds in their homepage design, so dark text work best in this case.

Most photos don’t have large pure blocks of color, so the areas of lightness and darkness in a photo could even determine where you put your overlays. In the case of the Treehouse homepage, the white text is on top of a darker area of the picture. The other side of the photo is brighter, which makes the layout feel well balanced. While you can adjust these bright and dark areas in an image editing program like Photoshop, it’s better to have a properly lit and composed scene at the time when the photograph is taken.

If you’re unsure about whether or not your overlays stand out enough from the background, check the page by viewing it in grayscale. One way to do this is to take a screenshot, then open it up in an image editing tool and apply a black and white filter. If there are areas that only contrast with color and not value (areas of light and dark) you’ll notice pretty quickly. If that’s the case, you’ll need to adjust the composition and contrast until everything is clearly legible.

Coding Background Photos

There are a few ways to create fullscreen backgrounds. If you’re using a framework like Bootstrap, you can apply your background to an element that spans the full width of the page. The large Jumbotron example is perfect for this sort of thing.

If you want your photograph to take up the entire background of a responsive page and hit all 4 edges without warping the aspect ratio, then I suggest using Chris Coyier’s perfect full page background image method. Here’s what the code looks like:

html {
  background: url(images/bg.jpg) no-repeat center center fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

This will work in most browsers, but if you need it to work in IE8 or below, you should click through to his article and read about the workarounds. I’ve used this code on a few personal projects and it works well.

Performance Tips

Photo backgrounds need to be fairly high resolution in order to deliver sharp detail on displays with high pixel densities. The Treehouse homepage uses an image at 5192 × 2817 resolution, and you’ll find a similarly high resolution picture on Apple’s website. There are a few tricks to making them performant.

Crop

First, make sure you crop the images in any way that you can. Apple does this with imagery on their homepage because the backgrounds are pure white, so it doesn’t make sense to load in a white background when the same thing can be done with a normal CSS colored background.

Resize

While you want the images to be large, don’t make them too large. At 5192px by 2817px the Treehouse image is definitely on the top end of resolutions and, theoretically, if Apple were to release a 27″ retina screen or a 4K display, those photos should be in the clear. You really shouldn’t have any need to go larger than that for the foreseeable future.

Compress

You actually can get away with a ton of JPEG compression on double resolution images. Sometimes in Photoshop I’m able to knock these images down to the 20% or 30% range. That’s because when the images are scaled down, the compression artifacts aren’t nearly as perceptible as you would expect. In fact, 2x resolution images with lots of compression sometimes have smaller file sizes than their 1x counterparts with far less compression.

Even More Tips

If your images are on the heavier end of the spectrum (1MB or more) it’s a good idea to consider swapping image sources on mobile devices or not loading the images at all. The upcoming <picture> element will eventually make this a lot easier, but for the time being, there are still some great options such as Responsive Images, Zurb’s Interchange, and Adaptive Images just to name a few. Also, if your project has the budget, you should definitely use a CDN (Content Delivery Network) to serve up your images with some overly enthusiastic bandwidth.

Resources and Inspiration

This trend has been rocking the Internet radio waves, so there are plenty of great examples and sources of inspiration if you’re feeling stuck. Unsplash is a wonderful tumblr blog that features totally 100% copyright free images that you can use for whatever you want. Even if you can afford to snap your own customized photos, these make nice placeholders while you’re still prototyping your ideas in code. If you have the budget, you could also reach out and hire a photographer to shoot your image, like Treehouse did with Christy Cassano-Meyer.

Another good place to look is Pattern Tap and filtering by home page. There are loads of beautifully designed home pages that use photography to the fullest.

If you have any awesome tips or favorite full screen photo sites, be sure to share them in the comments!

Free Workshops

Watch one of our expert, full-length teaching videos. Choose from HTML, CSS or WordPress.

Start Learning

Nick Pettit

Nick is a designer, public speaker, and teacher at Treehouse. He is also a co-host of The Treehouse Show. Twitter: @nickrp

Comments

16 comments on “Create Stunning Homepages using Photo Backgrounds

  1. wow “The Treehouse homepage uses an image at 5192 × 2817 resolution”

    ….that’s why it took 11 seconds to load the webpage….(1.1mb image file, 2.5 meg pagesize)…

    with 3G after 60 seconds nothing had loaded on my android phone…
    using wifi on my android phone it took 10 seconds for the site to load.

    I’m not located in the USA and only have a 1 meg internet connection…. so should I mention anything about page load speed and SEO..?

    • If you think that’s bad, check out the iPad Air webpage, weighing in at 14.4mb: http://www.apple.com/ipad-air/

      You’d think Apple would be more careful, considering they make so many mobile devices. Pages are just heavier than they used to be, so you should cut them down any way you can.

  2. Using a big picture as background looks attractive, and it is also helpful in showing the area of the website. For example, an airport site may have a large aeroplane in its background. However, like you said contrast is the key, if you failed to create a good contrast, it means that you failed to attract visitors.

  3. “don’t make [images] too large […] You really shouldn’t have any need to go larger than [5192px by 2817px] for the foreseeable future.”

    Seriously?
    Almost everyone agrees that speed is one of the most important things and you say such huge background images would be acceptable?

    BTW, there’s no need for vendor prefixes for background-size, cf. http://caniuse.com/background-img-opts
    Firefox and Opera have long dropped the prefixes, -webkit- should not be necessary even for old Androids since the images should not be loaded on mobile devices (media queries, …).

    • Images that huge are definitely on the upper end and you’re pretty safe to go smaller than that. Additionally, if there’s no need to load up images that large, you should swap out the image source using one of the tools I mentioned.

      Indeed, browsers have dropped vendor prefixes for background-size, but it’s still smart to include them in some cases (such as on a marketing site with a huge photo) where you might get a few older browsers from time to time.

  4. I work for a digital marketing firm specializing in web design, mobile applications, responsive design, motion graphics. Being a Lead Designer on severl projects, out of the 4 that I have in my work load right now, 3 of them chose concepts that have a full scale background image. We’ve come up with some pretty innovative ways to incorporate text and navs in there as well. I asked the last client specifically why they chose this concept, and there response was “They felt it gave a more personal feel to their brand, their company, and their overall web presence.” I have to agree with Nick in that you are going to start seeing a lot of websites that contain this very same effect. People seem to be very attracted and intrigued by this look. It is very sexy! And coupled with some strategically placed text with high contrast, flat design, and believe it or not, circular graphics have been a big hit lately as well. I just read an article that said graphics with hard edges were much harder for users to look at and be attracted to than circular graphics, it really is a “NO BRAINER”, These pages look great. Mobile on the other hand, is a little different, we have been trying to stay away from images on the mobile phone devices. If we do, it’s usually incorporated at the very top of the site, and limited to one, maybe two images.
    Great article Nick, keep up the great work.

  5. These articles are great! You make it easy for other people to understand.
    Please add “share it” buttons so I can share this with my other design friends!

    Huge fan of Treehouse!
    Thank you!

  6. Great article! When you use big images you get a little worried about people stealing your images (a photographer for example). Although I understand it’s impossible to completely protect your image, you can always make it harder for the average user. For example in the treehouse homepage you cannot right click and view the image or image background. Can you explain good ways to make it harder for the user to get your image ?

  7. Nice article.

    My question is, seeing as you are using a background image, why would you not serve a smaller image in CSS, and then use media queries to bring in the 1.2mb image on huge screens?

    Don’t mean to be negative, just trying to understand ;)

    • Adam,

      It probably would be a smart idea for us to swap image sources on the home page. In fact, I think this might be the case on mobile, as the photographic background isn’t present at all.

      That said, it’s not as simple as using media queries, because all the assets will still be fetched even if they’re not needed. This exacerbates the situation. Instead, you should use solutions that swap images sources like the ones I linked in the article (responsive images, interchange, or adaptive images).