website background image

As any marketing savvy business knows – driving traffic to your website is essential if you want to boost conversions, sales and profits. Now, you’ve probably used a variety of techniques to attract visitors, including social media, paid advertising or SEO. You might even have a dedicated “landing” page to quickly convert visitors. But – and it’s a big but – have you considered what your visitors will see when they land on your homepage, or more specifically, what website background image they’ll see?

Online shopping is an extremely visual process and with such a variety of choice, your business needs to not only stand out, but to capture and hold a visitor’s attention. Now, quickly think about how much time you spent considering whether you have the very best website background image for your site. Did you consider all the potential connotations of – well, let’s face it – potentially the first thing your customer digests?

But don’t worry. Here at Moodia, we’ve come up with 8 essential tips that will help you pick the best website background image for your business.


1. Understand the importance of a great website background image

Images are processed tens of thousands of times faster than text and 90% of all content that reaches the brain is visual. Our minds are hard wired to consume images quicker than prose, which might explain why image-rich websites enjoy almost 7x more engagement from users than those that are mainly text.

Furthermore, having so much easily accessible information at our fingertips means that our (read: your visitors!) attention spans have gotten way, way smaller! You’ve now only got 50 milliseconds to make a good first impression and only 8 seconds to retain someone’s interest before they get bored! Still think your website background image isn’t important?

The importance of a great background image cannot be understated. It should be a high quality image that attracts, interests and engages users whilst also representing and supporting your brand message. If you’re lucky, or very clever in your choice of background image, then it could actually convert your customer without you having to do anymore work!

2. Know what affect visitors’ perceptions

Remember that an image can instantly affect mood; colour can initiate emotions and quality can be a quick decider of your credibility in the marketplace. For example, an aggressive image is no good for a baby products website, nor is an image of industry a suitable one for a residential real estate firm. The image you choose should be relevant to your niche and potential customers.

Long story short, what we’re trying to say is: know your customers. What are their likes and dislikes? What are they visiting your site for? What do they want to get out of their visit?

When you can answer these questions, you’ll be able to severely narrow down the scope of potential background images that you have to choose from. You’ll not only have a sense of what interests and motivates them, but the colours associated with their likes and dislikes, as well as how they perceive themselves or want to perceive themselves.

With this knowledge in hand, you can tap into your market’s psyche and pick the most impactful image for the job.

3. Choose a website background image that is good for your business

Your website background image is probably going to be one of the most important on your site because it is almost certainly going to be the first impression of your business for any visitors. This means that it needs to do an awful look of talking if you want it to represent your company in the right way.

Whether you hire a professional photographer, take your own shots or buy high quality stock images, just remember that the right image is a great way to potentially show off:

  • Your business proposition
  • Your best product
  • Your service in action
  • Your location or event
  • You
  • Your team

Give visitors in an insight into your company ethos and let them buy into that, building trust and keeping them on the page for longer.

4. How to choose a large website background image

Large or full page images, illustrations or even videos can be extremely powerful if used correctly as they are an easy way to quickly capture your visitor’s attention. If your business lends itself to high-quality photography, or if your products and services make for striking visuals, then you should seriously consider utilising large or even whole-page sized graphics to maximise the impact you’ll make on visitors to your website.

There are some points of caution, however:

Your chosen website background images will need to conform to different screen resolutions as well as being fully responsive when resized. This is particularly important for mobile or tablet users, where more than 50% of all retail traffic now comes from!

Besides being responsive, it is an absolute must (and should be a given!) that all images – background or not – are of the absolutely highest quality and resolution. That being said though, higher quality images are often larger sizes and take longer to load. Run all website imagery through’s free tool to minimise their size whilst retaining clarity.

When you’ve chosen your images and fully optimised them for your site, make sure your in-house web team, or external website designers, fully test how the images display across as many devices and browsers widths as possible.

Finally, ensure that any other on-page elements are positioned effectively, which means that menus, links, etc, are all positioned in a way that compliments rather than competes with your large website landing page or background image.

5. Take care when centring, tiling or scaling images

Why, you ask? Because even a slight mistake can make your website look off-balance and unprofessional, impacting your brand image, customer trust and, ultimately, your profits.

Here’s a quick low down of what you should know:

  • Centring images – this brings us back to browser width as an image designed to cover the entire width of the page can lose its effect on larger or higher resolution display screens. If your image is too small or not of high enough quality this can result in blocky and pixelated images that just don’t look great.
  • Tiling – the preserve of old-school Myspace page design, tiling background images is tricky at best and a disaster at worst. Just know that it’s important that the “pattern” you want to tile meets in all the right places and will create a smooth, flawless look – think wallpapering here guys!
  • Scaling – can be tricky to accomplish effectively, especially if the original image is quite small. There are ways to reduce pixilation suing tools such as Photoshop, but again image resolution and eventual screen display should be borne in mind.

And remember, if possible, you should always preview your web pages before putting them live. That way you can keep on top of any background image issues before customers see them. Likewise, if you are working on a bigger web project such as a site-wide redesign, double check the appearance of images on your staging server before approving them.

6. Understand that colour can affect emotion

The effect of colour on emotion is well documented. Although you might want to take a risk on colour to get the exact brand match and style you require, bear in mind that a lot of research has been done and suggests that:

  • Red can be more aggressive, emotive or important.
  • Orange is playful, energetic and is claimed to increase haste and play on impulse.
  • Green can be natural, stable and prosperous.
  • Blue is serene, calm, trustworthy and inviting.

Just bear in mind the predominant colours in your website background image and consider how they may affect visitors to your site.

7. Choose the right website background image format and colour contrast

The most commonly used image formats are:

  • GIF (Graphic Image Format) – best used for simple graphics such as text or simple shapes, circles or lines.
  • JPEG (Joint Picture Expert Group) – best utilised for photographs.
  • PNG (Portable Network Graphics) – developed on the GIF principle to allow faster loading lower resolution graphics.

Colour contrast is vital so that buttons and text do not get lost against a busy or colour rich background image. Shapes and banners can be a good way to clearly separate content from images and to keep a site clean and effective.

Consider your bandwidth limitations and that search engine ranking penalties can be caused by slow loading images. Optimise your site images and background images to ensure a smooth and easy experience for anyone using your website.

8. Should you choose a video background for your website?

Video backgrounds are becoming more popular, particularly on websites built with HTML5, but they can be distracting and can increase page load times. However, if your tech team can optimise these video sizes, or create hi-res GIFs, then video backgrounds can be a very visually arresting sight for visitors.

Ideally you’ll film and create your own video backgrounds, but if you need to you can also purchase them from stock photo websites. It really depends on your budget and proposition.

Next Steps?

Before uploading your website background image, think carefully about whether you have really chosen the best image for your website.

There are both technical and psychological aspects to consider, so take your time and try not to overthink. If you have clear brand guidelines or an in-house style guide to work with then hopefully the process should be that much easier. Try to ensure that the final choice reflects both your brand or message accurately and inspires the right emotional response from your customers.

Finally, don’t forget to optimise your image by resizing and saving specifically for web before running it through Then, when uploading make sure your image is implemented properly by your designer or webmaster.

Our web design partners can help you pick the right website background image & save money whilst doing soWANT TO SAVE UP TO 30%?