Last year, a story popped up on The New York Times about how the celebrated Japanese composer and musician Ryuichi Sakamoto ended up creating a playlist for a restaurant in New York. The gist is that Sakamoto frequented this particular restaurant and was so annoyed at the music that he finally went to the chef, gave him a piece of his mind and offered to curate the music himself, without pay of course, so that he could feel more comfortable eating there. Interestingly, none of the songs he picked are from his own composition.
What Sakamoto did there might seem a little bit fussy but Sakamoto, a noted film composer who’s won an Oscar for his work on The Last Emperor, knows just how essential background music is to the whole experience. It’s not just with film and food, background elements are essential in almost everywhere and in web development, this practice manifest in the use of website backgrounds. Plain backgrounds are simple and don’t involve much consideration other than color but if you’re using an image as a background, that’s where things might get a little bit tricky.
Choosing things for the background
In a very weird way, choosing things that could work well in the background might actually be trickier than when you’re choosing things for the foreground. I have a friend who sings in both a band and a chorus and I’ve been told that singing lead vocals on a band takes a very different approach compared to when you’re singing in a chorus or when part of an ensemble. In an ensemble, you actually have to make an effort to not stand out, to blend in with the rest of the group while being the lead vocals on abad carry much less restrictions, although you still have to make an effort to sync with the rest of the instruments.
The Sakamoto story I provided above sheds some light to this particular issue. Take a glance at the playlists Sakamoto provided and you’ll see that the included songs aren’t exactly something you’d want to listen on your free time. This is by design, a good song doesn’t necessarily make good background music and what makes good background music might not have the same effect when played in the foreground.
Unsurprisingly, these same considerations should be taken into account when you’re trying to choose an image as a background. It’s the same case whether you’re trying to use an illustration or a photo as a background, you can’t just simply pick what might be objectively considered the best image, you have to consider that image together with the foreground elements of your website. Before you start feeling overwhelmed, here are some general issues you might consider when using fullscreen images as your background.
Use only high-quality images
1080p is the standard resolution for most smartphones with some Android phones upping the ante to 1440p. The last few years have seen an increase in 4k screens mostly in the computer space but Sony has actually released phones with a 4K HDR screen although it remains to be seen whether other manufacturers would follow suit. Anyway, the point I’m making here is clear, make sure that the image you’re using is of a high-quality to ensure they won’t become pixelated.
Strike a perfect balance between the background and the foreground
Images in general are ‘noisier’, for a lack of a better word, than plain backgrounds. Taking this into account, it is advisable for you to use less foreground elements than you normally would when you’re using plain backgrounds. The noisier the image, the less room you could mess around with your foreground elements. The one approach I like to use is start with picking the image first and then to start adding elements into the image until it’s too crowded. If you feel like one image isn’t giving you enough room, it’s time to try a different image.
Make good use of color contrast
Now, here’s the elephant in the room. When you’re choosing images for your background, you need to make sure that the image you’re choosing won’t obscure the text in the foreground. Having a background that overwhelms the foreground is a cardinal sin and is the sole reason why you have to take a different approach compared to when you’re choosing images to use in the foreground. The most basic choice would be to use white text on a black background or vice versa but that would seriously limit the kind of image you could use.
Thankfully though, there are shortcuts you could use even if the image you’re using is tad bit too overwhelming. The first thing you could do is to limit text placement only on certain parts of the image. If there are parts of the image that are more uniformly darker or lighter than the others, you could place texts around that area. Alternatively, you could selectively alter parts of the image to make it more habitable for text. Other solutions include using a colored text box to make it more legible.
Make sure your layout works with both landscape and portrait orientation
Mobile internet traffic is now bigger than desktop internet traffic. This has been the case for several years and frankly, I don’t think it’s going to change anytime soon, if ever. As such, you need to take steps in ensuring that your website is just as accessible on a phone screen as it is on the computer. Now, I’ve talked a bit about how you could play around with layouts a bit to ensure texts on your website can still be legible even with an image as a background but now you have to make sure that that remains the same even if you switched from landscape to portrait orientation as smartphone users often do.