How Full Page Background Images Affect The User Experience


Sabina Idler

October 18, 2012

Back to Resources

The user experience of a website has gained quite some importance in the last couple of years. A website is expected to be functional, reliable, and efficient nowadays. Besides these basics, it also needs to be engaging and fun. In order to stand out from your competitors and to make a lasting impression, you need to offer your visitors an experience worth remembering. You need to make sure they actually enjoy your website.There are many ways to improve the overall experience for your website visitors. For example, you can use icons, or mascots, and make sure you have an effective navigation menu.

Another way to make your website stand out is through full page background images. Here are 5 examples that show how background images can improve the user experience.


Storytelling in web design has been around for a while. The idea is to wrap certain information in a personal and engaging story. Users should no longer have to read big chunks of plain text. Instead, they should be offered information in an appealing and possibly interactive way. Storytelling allows your visitors to quickly grasp the essential message on your website.


You can apply storytelling to your website in different ways. An effective way that will certainly grab your visitors’ attention is the use of big background images. In this example, the website of Square uses a background image to tell a story about their product: The square reader allows you to accept credit cards anywhere. Even though the image is partly blurry, it shows the square reader in action on a busy weekly market. This doesn’t only explain how to put the product to work, but also demonstrates its flexibility.


No matter what the purpose of your website or product is, you have to be clear about it. When people visit your site for the first time, chances are good they are looking for something. It is your task to make sure they either find it, or quickly see that they need to keep looking elsewhere. Descriptive content is essential to make clear what you do or don’t do, and what you do or don’t offer.


Background images can help to bring across your central message to help visitors understand the purpose of your site. In this example, the website of PayPal shows a big background image of a lake setting with two people sitting on a landing stage, taking in the peaceful view. The image does not only convey tranquility and trust, it also demonstrates the point made in the copy to the left: PayPal is safe online banking. Wherever, whenever you want.


Engagement is important for any website. No engagement means your visitors will leave before they even give your site a chance. In order to get your visitors engaged, you need to make sure to grab their attention the moment they first set eyes on your site. Once you have their attention, do something with it. For example, you can guide their line of vision, invite them to get in touch with you, or take any other action.


In this example, the limited depth of focus of the background image draws immediate attention to the feet in the middle of the page. The position of the feet and the angle in which they are tilted to the left guide the visitor’s line of vision to the main headline of the site: Relaxation from head to toe. It becomes instantly clear what this website is all about.


Almost any website has some sort of call-to-action; a goal of what the people behind a website want their visitors to do on their site. This can be anything, such as the sign up for a community, the creation of an account, or the purchase of a product. The call-to-action and how effectively you manage to funnel your visitors towards it, is essential for the success of your website. Knowing how to motivate your visitors can make all the difference.


Background images can help you to appeal to your visitors and guide them in their decisions. In the example of the site airbnb, the background image shows a very unique and inviting renting place. The image changes sequentially, showing a wide variety of different places. The call-to-action is positioned in the middle of the screen, right on top of the big visual. Visitors are triggered by the possibilities of the suggested places, motivating them to start their own search for a place in their area of interest.


Personalization plays an increasingly important role on the web. People want to be unique and have their very own, individual style. Personalization of clothing, gadgets, or even websites helps us to define and communicate that style. At the same time, we become attached to personalized things. This personal attachment can be of extreme value for your brand, or website.


Background images can be a powerful tool to create a personal relationship with your website visitors. Visuals are very effective triggers for emotions, bounding people to your site. For example, Google allows you to personalize their site by setting a full page background image of your choice. This doesn’t add to the functionality of the site, or even the quality of the search results, but it makes me smile every time I use Google to research something.

How it works

You see, full page background images can be a great way to describe your product, back up your central points, or engage your visitors. But how does it work? Check out this article on perfect full page background images and learn how to implement a background image on your website that:

  • Fills entire page with image, no white space

  • Scales as needed

  • Retains image proportions (aspect ratio)

  • is centered on page

  • Does not cause scrollbars

  • Is as cross-browser compatible as possible

  • Isn’t some fancy shenanigans like Flash

Good luck!

Your thoughts?

These are only five examples of how background images can affect the user experience. What are your experiences with background images? Do you have more examples? Or maybe tips when to avoid them? Let us know what you think.

Subscribe for the lastest CX content

Copyright © 1999-2021 Momentive|888-684-8821|Privacy notice|California privacy notice|Terms of use|Cookie policy

*Net Promoter, Net Promoter System, Net Promoter Score, NPS and the NPS-related emoticons are registered trademarks of Bain & Company, Inc., Fred Reichheld and Satmetrix Systems, Inc.