Backgrounds, like their place in life, are rarely given the consideration they deserve when it comes to the world of web design. Business owners and web developers are content with going for the low-hanging fruits of generic stock images or a plain background as long as they don’t distract users from the content of the website. This approach isn’t wholly wrong, contents should always be the centerpiece of your website, but when done correctly, background images could reinforce the message or image you’re trying to convey and that’s no small feat.
Think of how Instagram influencers are willing to travel to and wait for hours just so they can find the perfect backdrop of their Instagram photos for example. They understand that background doesn’t always have to take a backseat; they could actually form the centerpiece of the content if you know how to use them properly. For website backgrounds, you don’t necessarily have to go as far as those influencers but there are still some considerations you have to keep in mind if you’re serious about finding the ideal background for your website.
The importance of background when it comes to first impressions
Ask yourself this, when you first open an unfamiliar website, do you immediately consume the available contents or judge the website based on the overall design of the website? Chances are you belong to the latter category as we are all superficial by nature. Even when it comes to people, we can’t help but form an immediate impression on people based on their appearances. The only difference is how much we judge them based on these first impressions.
What I’m trying to say here is that you can’t always rely on users valuing substance over style and simply focusing on the quality of your contents, you also have to place just as much focus on your web design, specifically the background of your website, as background make up a large portion of your website. Plain white backgrounds might work for newspaper websites like the New York Times but the rest of you are probably going to have to do more than that. As a starting point, the following tips should be able to help you find the ideal background for your website.
Figure out where the background is going to be used
Typically, websites use two sets of background; one that’s used on the homepage and/or the landing and another that’s used on the rest of the website. If you’re looking to make a great first impression, it’s the homepage/landing page background that you should be focusing on. Since there won’t be any content to worry about in your homepage, you have considerably more freedom to mess around with how the background is going to be used.
For the rest of the website, using a more neutral background is an option as accessibility is always a concern when it comes to your contents. Alternatively, you could use a white box over the background image so that the content would always be readable. If you’re using a white box that would only cover a portion of your website, you could use this as a creative exercise and play around with the visible background that they could still add some personality to your website even when only a portion of the background is still visible.
Considerations when using full screen backgrounds
If you’re using custom illustrations as a background, you should always design them to fit in with the overall design language and color scheme of your website. However, when using photography as a background, you could actually do the opposite by making the rest of the website fit in with the background instead of the other way around. For example, if you choose to use a photo background with empty space located on one side of the image, you can put the text and the rest of the website element on that empty space, thereby making the background the focus of the homepage.
If you don’t want the background to be the focus, you could use a color filter to mute the background image and make it more in line with the overall color scheme of your website. This could also work brilliantly if you’re using some sort of a collage for your background as the filter helps imbue them with a sense of uniformity. It should be noted however that even if the background isn’t the focus, you still need to make sure that you’re using a high-quality image as a background and that the image is in line with the message and/or image you’re trying to convey.
Make sure the background works in both landscape and portrait orientation
If you’re using simple patterns or motifs as a background, screen orientation wouldn’t be much of a problem. For full screen illustrations and photography however, you need to make it so that no matter at which screen orientation the website is being displayed on, the background would still convey the same message either way. The decision on whether to crop the image or to automatically resize them depends on the kind of image you’re using and your preference so test them out first to see if they still carry the same impact in both screen orientations.