Site without background images

Add Images to the Top and Bottom of the Background of your Website

, 0

If you currently have a plain background on your website, you may not be making as much money from your site as you could.

Why would adding background images help?

Put simply, images speak louder than words. By using fantastic images that describe what your website is about you are getting your message across strongly.

Here are some examples – see how long it takes you to figure out what each website is about:

Site without background images

How long does it take your brain to figure out what this store is all about?

Store with background images

It’s much quicker to recognise the key theme of this store

By using good images that help describe your store or website you can encourage people that they have landed at the correct place, and reduce how many people hit the ‘BACK’ button immediately, reducing your ‘Bounce Rate’.

Why does bounce rate matter?

There are tons of reasons why you should care about your bounce rate. It’s one of the most important things you need to know about your site.

If you have a high bounce rate, people are leaving without browsing at all meaning your adverts are going to waste and/or your SEO efforts are going to waste.

It gets worse – if you have a high bounce rate it affects Google’s impression of your website. If you’ve heard of Google Panda, then you’ll know that there is some magical formula Google is using to determine if a website is ‘Quality’ or not. If you’re site is not deemed ‘Quality’ you will be hit with the Panda Penalty.

This magical formula is pretty much based on how ‘engaged’ people are with your website.

If you’d like to learn more about lowering your bounce rate using other techniques, I highly recommend Ana Hoffmans Bounce Rate page.

What is ‘engagement’?

In plain English, it’s how much people interact with your site. In Google’s terms, they measure it using a combination of Bounce Rate, Average Time on Site and Number of Page Views.

If you reduce your Bounce Rate, you will have as a result a higher Average Time on Site and a higher Number of Page Views, so it’s one of your most critical statistics.

Ok, I’m sold – How do I add images to my backgrounds?

You have to modify your CSS. If you are using the Roots theme then edit your app.css file using FTP, or if you are using most other WordPress templates, use Appearance -> Editor and scroll to the bottom of the style.css file.

Add this code to the bottom of the file:

body {
background-image: url(/wp-content/themes/babyshowerer/assets/img/cute-baby.jpg), url(/wp-content/themes/babyshowerer/assets/img/babies.jpg);
background-size: 100%, 100%;
background-repeat:no-repeat, no-repeat;
background-color: #FBFEFF;
background-position:top left, bottom left;
}

Replace the two images with the images you wish to have top and bottom of your site and replace the background-color with a suitable background color for your images.

Top Tips for Website Background Images

  • Save your images as jpg for background images – this reduces the size drastically (use png for everything else)
  • Fade the top image out at the bottom and fade the bottom image in at the top to – fade out to your chosen background color. If you’re using Paint.net for editing images (free), then use the gradient tool to fade your images.
  • Choose images that describe the single most important theme of your website
  • Choose images that are 1920 pixels wide so they look great on the biggest monitors (if searching using Google Images there is a button called ‘Search Tools’ which lets you specify the size)
  • Go to Google Analytics and add an Annotation to remind you of when you set up your background images. That way, you can measure how much impact your background images have had on your bounce rate.

Troubleshooting

You may find that your background image shows through EVERYTHING. This may actually be what you want – if it’s NOT what you want, and you’d rather have the background image behind a white canvas then add the following to your CSS if you’re using the Roots theme:

#wrap {
background-color: white;
padding: 20px;
border: 1px solid #AAA;
margin-bottom:100px;
}

If you are using TwentyTwelve, the code is the same, just the selector changes from #wrap to #page:

#page {
background-color: white;
padding: 20px;
border: 1px solid #AAA;
margin-bottom:100px;
}

Summary

You should end up with a lower bounce rate AND a more beautiful website. If you have any questions specific to your site, ask away below and I’ll help you out.

Latest posts by dhilditch (see all)

David Hilditch

Related Posts

Leave a Reply