Should you use a full screen background image?

Categories Articles, Web Design

If you’ve ever read (or just scanned the images of) a “web design trends” blog post, then you’ll notice there are loads of websites using a single massive image as the background and primary focus point of their website. On top of these images you’ll usually find a unique typography that states a slogan or motto, lists services, or makes some other eye-catching statement. In some cases this text will just state their name. This large background image trend has caught the eye of the many web designers and has become one of the most popular trends on the Web today.

In some cases, the image is the whole site; however, it’s usually just acting as the slider image.


Before diving into why it’s even a trend or how the user views the website, let’s look at the most recent web design awards over at Awwwards and see what their judges find as the “best” websites out there:

Back in January of 2014, The Hobbit: The Desolation of Smaug won the award for website of the month.

hobbit home page

Next up let’s look at March of 2014 where Volkswagen’s French website featuring their sports cars won the website of the month award.

Volkswagen French home page

Current Nominees

Wonderfully Wild is nominated for an award.

wonderfully wild home page

And finally we have Bobby Kane, a freelance web designer who is also nominated for an award.

bobby kane home page

Why It’s Popular…and Why They Win Awards

These single, massive background images are constantly popping up in nomination slots on website design award websites, web design trends, and web design inspiration articles. The primary reason is because they are effective. Most people feel the need to at least see the whole image when they land on a website, meaning a longer time on the website and a wider range of scanning. Full-page background images offer such a wide range of flexibility for creativity that it’s easy to see how this has become a trend. So many designs are limited as to not offer as much room to let the creativity juices flow.

But most importantly, the single background image gives users a single image to associate with you, your company, or your niche. For example, in the Bobby Kane example, you immediately get the personalized effect. You know what he looks like, and some of his interests (coffee based on the mug, music based on the ear bud, and learning based on the books and tutorials) before you read any text.

There’s a similar effect in the Wonderfully Wild example. If your industry is anything related to nature, a professional photo of the rolling hills is always an effective way to set the user’s mood.

Lastly, it’s important to note that this design style is often combined with an interactive design. This naturally has a longer retention rate and, presumably, more conversions. It’s often worth it to create an interactive website that uses full screen background images.

Final Words

If you use this full screen background image design style and shoot for no vertical scrolling either, keep in mind that you will be limiting yourself in terms of content. However, if the image is really to keep the user on the website and encourage them to read more of your content, then you can place the content below the image or on another page.

Final important notes:

  • The image will always be centered
  • It can remove scroll bars
  • Always compress the images…if you don’t, the website will be way too slow
  • Speed is important for SEO and user experience
  • Emotion and mood is easily and quickly set

Author bio: Ryan Gavin is an associate of Ignition72, a Maryland web design agency. He loves finding new websites with great designs and other designers that do their job well and love it. He feels that without a web designer, a website is rarely successful.

Catalin is the founder of Mostash - a social marketing boutique - and he's always happy to share his passion for graphic design & social media.