Backgrounds have long been a key ingredient to a well-designed website. Modern design trends have placed even more emphasis on them. They’re now expected not only to frame content, but to provide visual separation for various sections within a page as well.
A Web Designer’s Guide to Selecting the Perfect Background Image
When using images for your website background, it’s best to choose carefully. The wrong choice can really throw off your message. Not to mention the possible negative impacts to accessibility.
With that in mind, let’s explore some best practices for choosing and implementing background images.
1. Accessibility Comes First
The first question you should ask yourself when considering a background image is: What effect will it have on the readability of content? You’ll want to ensure that text is readable and that, when combined with the background, an acceptable contrast ratio is set.
If you’re not quite sure about the above accessibility concerns but you really love a particular image, there are some things you can do to make it work. You can use photo editing software or even CSS to change things like opacity and contrast, or add layer masks in order to help make content more readable. It’s also important to choose the right font and font size for the content itself.
The bottom line is that your background should never interfere with a user’s ability to properly view your content.
2. Photos Should Be Relevant and Uncluttered
Photo backgrounds have become very popular on the web, and are a great choice to cover large areas. It’s a good idea to choose photos that are relevant to your website in some way. That could mean a photo of your physical location, a product, or a service. But you might also look for something that you feel will help to convey the message of your content. Background images should be thought of as part of your overall branding strategy.
You’ll also want to look for photos that have some open space (think of a skyline or a field of grass). A cluttered photo might take away from your content, even with opacity or color changes. This doesn’t mean you can’t use action shots or other compelling imagery. It’s more a matter of avoiding images that are too overwhelming.
3. Use Textures That Are Subtle and Seamless
Textures can add a touch of class to the overall look and feel of your website. Whether used for a page background or a specific content area, look for textures that are seamless—meaning they can repeat a pattern across the screen that makes it look like one large image. While you can sometimes get away with using a full-sized textured image, especially detailed ones don’t always work well across multiple screen sizes. Plus, images with a large file size can negatively affect page load time.
Subtlety is also a desired quality in a texture (unless you’re going for a more brutalist look). Again, the idea is to not overwhelm users with bold patterns. Look for images that contain softer lines and colors that will contrast well with the content.
4. Consider Multiple Screens and Devices
The visible area of a background can change dramatically across various screen sizes. This can particularly have an effect on photos. What may look just stunning on a widescreen monitor can also look horrible on a phone. Key parts of the image can be cut off and result in something that loses context.
The challenge here is part photo selection and part code. First, look for images that fit the desired aspect ratio (landscape, portrait, square) of the parent container. They’re more likely to scale nicely for smaller screens.
You will also want to look at how your website’s CSS handles background images for different screens. For example, using the
background-size: cover; CSS property can ensure that the full image is visible. Just know that it may throw off the container sizing a bit. Most likely, adjustments will have to be made to get everything looking pixel-perfect across devices.
5. Start With High-Resolution Images, Then Crop
When downloading images you plan to use for your background, choose the highest resolution available. This will allow you to make any necessary edits and then crop the image down to a more appropriate size. You’ll want to make sure to save edited versions as a separate file.
Figuring out the appropriate size will depend upon the width of the container within your site. While some images will stretch or repeat quite well (an advantage of using seamless textures), others may appear distorted. In that case, crop to the widest width you’ll need. You might even use CSS Media Queries to call in smaller versions of an image for other screen sizes.
Bringing Backgrounds to the Forefront
It’s understandable that, with so many exciting technologies influencing web design, we tend not to pay as much attention to backgrounds. But they perform a very important role in storytelling and helping us create a pleasing UI. Full-page backgrounds help set the tone for a website, while section backgrounds provide our content with some space to breathe.
Of course, it all works best when we choose images that serve our needs. Images that enhance—not interfere—with a user’s ability to consume content. But we should also consider details such as size, aspect ratio, and suitability for mobile devices. Remember that details matter, even when it comes to items used in the background.