justinmind

Website backgrounds: the full guide

February 07, 2020
full guide to designing website backgrounds

Website backgrounds can be a powerful tool in creating an experience. But what kind of experience can you convey and how? Read on to find out.

The background of your website is a huge part of the user experience. It can elevate your design, transmit emotions and stories and add a huge amount of value. It’s an essential part of your website’s UX design.

Create interactive website prototypes with Justinmind. It's free.
Download Free

There are so many different roads designers can take when it comes to the background of their website. From pleasant color gradients, unique and interactive illustrations or videos that paint a picture, to a single image that occupies the entire screen. Each one of these roads leads to a different set of benefits for users and designers.

But which one is right for you?

In today’s post, we’ll guide you through designing a website background that reflects the personality of your brand and how you can play to your strengths using the background as a tool. Let’s dive right in!

Basic concepts to keep in mind

The background design of your website can have a huge impact on the user experience. Your website background will likely come at a later stage in the product design. It’s not exactly a building block like your navigation design or the information architecture. It is, however, massively important.

The background of the website can make or break the user experience. It’s one of those things that most users won’t actively notice unless it’s either really great or just terrible. Having a bad background has some awful consequences:

  • It can distract users from their task
  • It can be confusing and mess with the visual hierarchy of your components
  • A poorly implemented background can ruin the credibility of your website, giving users the impression the entire website is poorly constructed
  • Technically flawed backgrounds can interfere with the SEO of the website and compromise your access to an audience

With that said, giving users the right background can be all but magical. The right website background adds value, brings the design together and has the power to immerse users in the product.

basic concepts for website background design

Newlytics

And so, let’s take a look at the two types of website backgrounds that all designers deal with when creating a new website: body and content backgrounds.

The body background is the actual area that covers most of the screen. This is where you’ll find backgrounds of textures, illustrations, color gradients or just a full image.

The content background doesn’t extend to the whole screen, but rather surrounds the area around other components, like text or an image.

Many popular website background patterns out there consist of layering the body and content backgrounds to achieve a desired effect. Others involve forsaking the body background altogether and having components sit directly on the body background.

Designers have so many possibilities when it comes to creating the background for their website, from unique illustrations to dramatic images and videos.

layered body and content backgrounds example

Good on You

As it tends to be the case when we are given too many possibilities, it can be overwhelming to narrow down on the best option for your product. But don’t worry! Let’s take a look at some of the most classic website background patterns that designers all over the world rely on to deliver memorable experiences.

It’s crucial to prototype everything to the highest fidelity possible so there are no nasty surprises further into the product development. Remember: always use a professional prototyping tool.

On the matter of body and content backgrounds

These two kinds of website background give designers a lot of room to create the experience they want. One of the most common approaches is to use the body background as a base, and then layering other content backgrounds so we achieve a sense of depth.

Some websites have a graphic background, such as a video or full image and add semi-transparent content backgrounds. That way, you keep the components safe from disappearing into the body background.

content and body backgrounds explained

Old St. Records

Alternatively, you create a body background and have a single content background layered on top – a trick that we often see in blog templates.

There’s another option still. Instead of trying to layer website backgrounds, designers can also place the components of the website directly on the body background. This move is usually a delicate one that requires precision – the wrong placement could render your component invisible. The body background in these websites usually enjoys a solid color, an illustration of a full image.

One has to be careful though. It’s only logical that the designer wants to deliver something memorable and unique – but usability comes first. Placing components directly on the body background means a lot of usability testing to make sure all your users would be able to use the website.

Website backgrounds: header in focus

Using the top part of the page can be a nice way to give the website a boost of personality. This is a good spot for attention grabbing elements, such as bold colors and illustrations, because it’s likely to not distract from the content that follows.

There are, of course, a few details that will separate a good header-oriented background from the iffy and dubious one.

Your header may be a great spot to show what your website personality is all about, but it’s still a very defined area of the page. Starting with an illustration at the top that spills into the rest of the page is only a good thing if it’s done carefully.

example of header oriented background design

Template by Astra

You want to make sure you separate what is the graphic background of the header from the rest of the page to keep it from feeling saturated with visuals. You want to add value, not distract users from their ultimate goal. Ultimately, you want the separator to instill a certain visual flow from the top of the page downwards.

Many website backgrounds also make use of the header-oriented background, but refrain from using big illustrations or graphic elements. The result is usually a large header area that leaves plenty of blank space – which makes for a simple design that helps the components breathe.

Graphics in website background design: worthy observations

Using graphic elements gives the website a really unique feel, and can work to create a story for the user using nothing but visuals. But while having a graphic website background can make for a great user experience – it does have its tricks.

The style of the graphic elements has to play into the general feel of the website, so you deliver a consistent experience to users no matter what part of the website they are in. With that said, the other observations regarding graphic elements in the website background relate to the visuals: they have to be just right.

example of graphic website background

OceanWP

Firstly, focusing the big side of the graphics at the top of the page is a great way to allow yourself a bit more space so you can develop on your graphic concept and elements. But while the main body of graphic elements should be at the top, cutting it short abruptly is likely to ruin the flow of the website background, making it feel incomplete or just not entirely right.

The ideal use of illustrations would be something that also bleeds a bit into the area of content, further down the page. That way, you allow the graphics to establish a flow and direct the eye of the user.

As with so many things in the UX field, everything is debatable. Some designers may choose to simply have the illustration bleed a bit into the content, they just extend the illustration so there’s a graphic element in the background throughout the page.

Care is needed, however. With graphics, such as illustrations, it can be easy to cross the line from entertaining to overwhelming. You want to distribute the graphics so that the user can still focus on the actual content.

Don’t miss out: Check out our post on great graphical backgrounds for mobile. There are some great examples of illustrations, gradients, full images and plenty of inspirational material.

Full body backgrounds: working the space

Making the most out of the screen space can be a great way to deliver an impacting experience. A picture is worth a thousand words, right? We love full body backgrounds when they are done right: when the background adds value to create a feel to the page.

It’s only logical that using a picture for your website background might be a potential hit with your users, but it can also be a serious miss. With a full body background, it’s only too easy to interfere with the actual content or to miss the general personality of the website. Balance and precision are key here.

Full body backgrounds could be a full image, gradients, solid blocks of color along with graphic elements.

When using the entire body background space, you need to be mindful of contrast and distribution. Colors in the background can’t be too bright, the different elements can guide the user’s eye but can’t compromise the usability of it all. So what are some of the ways we can ensure our full body website background works for everybody?

Highlights are your friends

When talking about a full body background that focuses on solid colors, it’s usually best to try to create different sections of the page. This will help the visual hierarchy as well help your page flow better. Hence, highlights.

Highlights are very thin lines (about 2 pixels) that consist of a different color to either the above or below backgrounds. This line helps us separate the sections, and break the solid color blocks for some visual relief.

Another benefit of using highlights is that their presence adds a bit of dimension to the website background, while helping the general look stay clean. The main trick here is that the different sections of the background and the highlight itself need contrasting colors to create this layered effect.

Full body images: best practices

Using a single image for the full body background can be a bold move. The different colors and tones in the image can make it difficult to balance and contrast with the actual content – but there are ways to counter that.

1. Choose the right image for your website background

First things first, you need high quality images (300 dpi). Your website background image will usually be the first element that loads on the page, being the first thing users see. So if you want users to see the value in your site when using a background image, you’ll need to use high quality visuals.

The trick is to use the largest possible file without it slowing down your site.

Images with lots of detail should be saved as JPEG. JPEG can display millions of colors and is compatible across platforms, browsers and image editors. According to HubSpot, JPEG is the best file type for ensuring high quality images at the lowest possible file size – perfect for optimizing your site’s page speed.

For more: Check out Hubspot’s article on how to pick the right file extension for more details. There’s a pretty cool infographic too!

If you need to be able to scale your image to various sizes, SVG is your best friend. SVGs (scalable vector graphics) allow you to change the size of your images without losing quality – great for designing a responsive website.

Don’t forget that if you’re working with SVG images, you can change the color of images as well as their size in Justinmind. All it takes is a trip to the Properties palette.

2. Use UI color wisely in your website background

Picking your colors and their combinations is important as they contribute to how users will read your site, literally as well as figuratively.

Placing content directly on the image can be incredibly challenging, as the different colors and tones of the image can render your content unreadable. Contrast between the picture and components is crucial!

full body website background example

Okains Bay

To get around the issue of reading the text on the image itself, many designers turn to content backgrounds. These can be a handy way to not just create a layered effect that gives us depth, but to also make sure everyone can read your content easily, no matter the image.

The content background can be a solid color so that the contrast is between the content and body background (and not necessarily the content). Alternatively, a semi-transparent one could let the image take the spotlight, simply helping the text be more user friendly.

Text needs to be readable and scannable and, when combined with the site background, set at an acceptable contrast ratio. Nothing less will do.

3. Consider the positioning of your site background image

A full-screen background image can sometimes detract from other UI elements on the page. Striking the balance between a large, impressive image that engages users and one that distracts them from important content is essential.

example of good image positioning for website backgrounds

Washington Post

Start by considering the different types of background image: background vs hero headers. Hero images are pinned to the header section of a website and relate to the content that sits directly beneath. They help to deliver a message about a specific feature of your site.

Check out how to prototype a hero image website with Justinmind. If you’re not quite there yet, how about some inspiration? We got 10 awesome hero image websites to get the ball going.

In contrast, website background images are not pinned to the page and are visible as the user scrolls. They are best suited to creating an overall theme or vibe for a site, rather than highlighting a particular aspect of the site.

It’s important to note that while the background image stays visible as the user scrolls, it remains fixed. That way, you keep the correct shape of the image and enjoy freedom in the content background.

4. Go responsive with your website background image

With users browsing sites from a multitude of devices, no web designer worth their salt would dream of designing a website without experimenting with different screen sizes and browser window widths.

So why should it be any different when it comes to your website background? Using an image that you hope will look equally good on small and large screens when scaled isn’t good enough anymore. Users expect your content to adapt perfectly to their devices – users’ standards are much higher today.

In order to present your site to as many users as possible, you should be testing your site background out on mobile as well as desktop.

For more detail, see our post What is responsive design?

Videos for website backgrounds: motion and branding

Using a video in your website background can transform the user experience into something much more interactive. Videos tend to fall short when it comes to content-heavy websites such as news platforms or blogs, but they shine bright when it comes to branding and marketing.

Using a video could be a great way to transmit a certain value or aspect of the brand, such the feel of exclusivity in luxury brands or the desire for adventure in travel agencies. Getting the video background right, however, can be a bit tricky.

On weight and quality

There’s the issue of weight. Videos can be heavy, and forcing users to sit through a video that keeps stopping in order to load makes for a terrible first impression of the entire website. Users with iffy internet connection are likely to suffer from this unfortunate evil.

It’s vital to compress the video as much as you possibly can. Some designers try to stick to 720p videos with low frame rate to 24 or 25 frames/second. The general idea is that you need to find a balance between the quality and weight of the video.

If you find that in compressing the video to an acceptable weight, you’ve compromised the quality of the image – you could try to use an overlay on the video.

example of website background with video

Black Belt Monkey

This could work really well with a semi-transparent overlay, giving you the option to match the color of the overlay to the rest of the website. A patterned overlay hides even more imperfections, but won’t suit the style of most websites out there.

Lastly, try to limit the length of your video. A long video might sound like a good idea but more often than not, it’s just not necessary. Users came to your website with a task in mind, a goal. And we are willing to bet that most likely, that goal wasn’t to specifically watch the background video.

A nice trick is to use looping videos. That way, the experience of the user will be of a longer video but the weight of the file can stick to a minimum. Yes, creating or finding the right looping video might be extra work, but your users will appreciate it!

With that said, don’t loop forever as that can slow down the entire website. Define a few seconds, and have the loop pause itself after that.

On the visuals of it all

Having a video can be really exciting. But don’t let it distract from the fact that it’s still a part of the website background. That means that your video shouldn’t ever out-shine the actual content. For that, it’s better to try and keep the movement in the video to a minimum as well. This way you allow users to concentrate on reading the content, and achieving their goal.

Stay clear of: Shaky shots, fast panning, quick cuts as well as unstabilized footage.

Another matter is contrast. Yes, we keep hitting that same note, but only because it’s a central issue to the readability of the website. The website background can never make the user’s life more difficult.

example of good visuals in video background

Wajer

To mitigate the contrast issue, we recommend you avoid shots that have very bright and very dark spots. Try to find more uniform color schemes in the video. It will make placing content on top of the video much easier!

On the matter of usability

When creating your video website background, it’s imperative that you consider the devices users have. Making a video for a website can be a great move – but what if that compromises the mobile experience?

It’s still a fact that most users’ mobile phones are much slower in loading speed. Not to mention that general support for background videos isn’t where it needs to be. Both iOS and Android devices have their issues with automatic videos in backgrounds, which makes many designers fall back to images in mobile devices.

usability of video backgrounds in websites

The Ten Tribes Partnership

Hiding the video for mobile users can be done with JavaScript or with CSS, effectively removing the video from the mobile version of the platform.

A separate matter is that many website background videos don’t offer users a pause option. That is a mistake. Another hard fact of life is that you can’t please everyone. Even if you spend a long time perfecting your video, some users will still wish they could pause it so they can fully focus on the content. In this case, we say: give the people what they want!

Places to find the perfect background for websites

Free resources we love

1. Unsplash

Unsplash is widely popular among web designers looking for high-quality images for website backgrounds. People seem to love that the images are free, under the Unsplash license, but still deliver the quality you’d want for your website. The images are free to use for any purpose, and crediting the platform of the photographer isn’t necessary.

unsplash- free resource for website backgrounds

2. Pexels

Like Unsplash, images in Pexels are under the Pexels license. This makes them free to use for any commercial or personal project, so long as you don’t try to sell the images as if they were your own. Fair enough.

free image bank for website backgrounds - pexels

3. Pixabay

Another platform that has so many images in their bank, you’re likely to find the right one for your website background. Pixabay’s images are also under their own license, and available for any end you see fit. The conditions are the same as the previous free platforms – you are free to use the images without attribution. You are not free to sell them as your own.

free bank for backgrounds at pixabay

4. Rawpixel

Rawpixel shares most traits with the above image banks, but has one key difference that sets it apart. While most image banks try to keep their images inspirational, Rawpixel managed to deliver images with context. Images that tell a story, that show human interaction. If your project includes something that needs a bit of visual storytelling, this platform is the one for you.

free background images at rawpixel

5. Subtle Patterns

This one isn’t for everybody. Subtle patterns isn’t the platform for inspirational or contextual images. As the name suggests, these images are all about patterns that you can use to create a certain style and feel to the website. Find everything from tiny bows to snowfall patterns!

The platform is completely free, but it does ask that users attribute the image in the code of the web page. You can find more information on their FAQ page.

subtle patterns as free source of backgrounds for websites

Paid resources we (still) love

1. Getty images

Yes, the stock image bank we all know and love. Getty images is many designers’ go-to platform for beautiful website backgrounds and we can totally see why. Their images have an incredible range, making Getty images a great place no matter what kind of image you are after.

getty images as source of paid backgrounds

Another great plus is their search system, which helps you find the right kind of image much quicker than other stock image platforms.

2. Bigstock

The reason we included this platform is that while other bigger banks, like Getty images, have a larger array of images – they can be a bit pricey. If you don’t need that many images but won’t accept anything other than perfect quality for your website backgrounds, Bigstock might be the best option.

bigstock as paid source of website backgrounds

The platform has a very budget-friendly monthly subscription plan, which allows for a lot of flexibility on your end. Perfect for smaller teams or small projects.

3. iStock

A smaller brother to Getty images, iStock is a great image bank for website backgrounds. It offers millions of images that all check the quality box, as well as plenty of illustrations and vector images.

paid platform istock for website backgrounds

We love that you can use a credit system (you pay for credits that then allow you to get images as you need them) or a subscription system for a more steady flow images (from 10 to 750 images per month depending on your needs).

4. Shutterstock

Shutterstock is another great platform for those who need a bit of flexibility when it comes to the number of images they’ll take from the bank. The platform gives users the option to subscribe to a certain number of images per month or simply purchase credits that can buy images separately, on demand.

shutterstock as paid image bank

5. 500px

500px is beloved by its users. With a very large collection of top-quality images, this image bank also offers free images. It goes without saying, however, that the paid images surpass the free ones in quantity. Users of this platform are quick to praise the artistic value of the images, which tend to be both beautiful (such as nature shots) and realistic (pictures of social interaction).

500px as paid background bank

The wrap up on website background design

Stunning photographs and stylish graphics can complement your website, but only if used correctly. Your website background has a huge influence on how your users will experience the entire product, so it’s definitely worth taking extra care.

It’s time to make the most of your website background, and get working on rendering those beautiful visuals!

PROTOTYPE · COMMUNICATE · VALIDATE
ALL-IN-ONE PROTOTYPING TOOL FOR WEB AND MOBILE APPS
Rebeca Costa
In-house writer, usability enthusiast and patron of all sleep-deprived designers