How to Create the Perfect Background Image for Your WordPress Website

Have you ever heard about the 80/20 principle? It's also known as the Pareto Principle and it states that roughly 80% of the effects come from 20% of the causes.

Bear with me because, even if you're not into math, this principle will prove itself incredibly useful to improve your website design in very little time.

After looking over hundreds of homepages during the 5 Day Better Homepage Challenge, this principle has proven once again to be true.

Roughly 80% of the websites we looked at had the same troublesome element causing a majority of the problems. 

The problematic element? Your background image.

We noticed that you like big, full-screen background images on your homepage.

And we understand. A well chosen image will instantly offer a WOW-effect to visitors.

Unfortunately, the background image was also causing roughly 80% of the problems we identified. 

A poorly picked background image will actually hurt the effectiveness of the homepage.

In this article you’ll discover how to pick and create the perfect background image and give your homepage that design boost you’re looking for.

More...

The Most Common Problems With Background Images

There are two obvious and two less conspicuous problems with background images.

The two obvious problems are speed and readability.

We noticed that many background images took a long time to load. This happens when the image is too big or not optimized for the web. This is annoying for visitors, but is also a negative factor for SEO.

The second and even bigger problem is readability. Unfortunately, some images just don’t play nice with text overlays which can make your actual homepage message impossible to read.

The title of your homepage is the most important element of the page. It's what gets visitors to stick around and read on. If that title is hard to read because it doesn't overlay well on your background image, ​chances are that new visitors will bounce rather than squinting to figure out what your website is trying to offer.

The two less obvious problems are related to your brand image and the clarity of your message.

Not every business can afford to have custom images taken by a good photographer. Luckily, there are a lot of websites that offer free, natural looking stock images. But this also means that everybody has access to the same photos.

Using the exact same stock image as your competition can hurt your brand image and make you blend in rather than stand out from the crowd.

The choice of your image also plays a big role in the clarity of your message.

Because of the growing trend in full screen background images, we’ve seen businesses use them even though the actual image has nothing to do with the product or service they provide.

But you shouldn't use an image just for the sake of having an image...​

If you can not find a photo that’s closely related to your business, ask yourself if using an image is the best choice here. You can make a good looking design using colors and patterns rather than images. That's exactly what the websites below are doing.

Examples of websites that use colors, gradients and patterns rather than images for backgrounds.

Having an unrelated image is bad for clarity, but so is counting on the image to do all the talking.

If the image is necessary to understand what the website is about, you will have a big problem with SEO.

Search engines can only read code. They can not “see” images. An image like the one below will never help the site rank for anything Crossfit related.

Don't count on your image to do all the talking...

The only thing Google can read on this image is "Become a Better You".

Although you can add attributes to your images to help search engines understand what the image is about, it will never be as visual for your “human” visitors or have the same impact on your rankings as words in a big homepage headline will.

Now that we’ve covered the 4 problems with background images, let’s see how you can avoid making the same mistakes. It will only take you a few minutes and all of it can be done with free online tools.

What Image Should You Choose for Your Homepage Background?

First question: What image will help you communicate your core message?

Brainstorm a bunch of words you would like to have pop up in the visitor's mind when landing on your website.

Now, go to a free stock images sites such as pixabay, Stocksnap.io or Pexels and put the words in the search engine to see what comes up.

Off course if you have original, high quality photos, that’s even better.

Look for an image with uniform colors. A text overlay on an image with very dark and very light areas will always be harder to read than a more uniform image.

Images with uniform colors are more suited as background images.

Download the photos you like in a resolution that's at least 1920 px wide.

Let’s Kill Two Birds with One Stone: Readability and Brand Image

Now there is one simple trick to making any image instantly more suitable for a text overlay.

What this simple trick?

Adding a background overlay.

Let me show you how to do this by using a free, online tool called PicMonkey.

You'll first discover how to use a standard overlay and then we'll ramp it up a bit and use a gradient overlay.

The Need For Speed

Now that you have your image in the right dimensions, it’s time to optimize it for the web.

This sounds complicated but is actually super simple!

Go to Kraken.io, pick the "free web interface" and upload your image.

The data size of your image is instantly reduced without any visible loss in quality!

If you're using a Thrive Theme, you can use the built-in image optimize function so you don't need to use Kraken at all. You can see how to use this cool feature here.​

It's Your Turn Now

Were you accidentally making one of the mistakes described above?

If so, were you able to use the simple tricks we showed to fix it? Let us know how you managed in the comments below!

Author: Hanne Vervaeck

Hanne knows exactly what companies have ever retargeted her (she keeps an updated file). And when she's not busy discussing high-level funnel design over cocktails with the equally geeky, you'll find her discovering a place for the first time

96Comments

Great blog post!

Makes it more likely that I will take the plunge and actually add an image to my homepage…
:-)

Thanks!

darryl Reply

Is there a simple online tool for creating different overlays? For example I’ve seen cross hatched overlays on some homepage background images. Or is this only possible using Photoshop?

    Hanne Reply

    Hi Darryl,

    In PickMonkey you can use some of their effects to create nice background images (start from a colored background and add the effects) there is also a website called subtle patterns but you would still need a tool like Photoshop if you want to change the color. If you use one of these patterns, you can use them as a background pattern in TCB rather then uploading them as a background image.

Cool – PicMonkey looks a bit like Canva, which I use off and on. I’ll check it out though and see if it’s worth investing in.

    Hanne Reply

    Hi Steve,

    Yes, they can do some of the same stuff. I find Canva easier if I want to make a special layout (for social media images eg.) because it has a lot of templates to start from. For photo editing, I always go back to PickMonkey because it seems quicker and easier to me.

I’m a big fan of direct response and Ogilvy – he was a fan of just using plain white background and not being fancy.

And while the rest of the people try and make everything “look good,” I guess there’s an inherent differentiator in keeping things plain and simple? :)

    Hanne Reply

    Plain and simple works… as long as your website doesn’t look like it was made when Ogilvy was still alive ;-)

    I think it’s important to give a pro looking feel to a website. This can off course be done without images! But just plain white might be taking it a bit too far :)

Thank you so much for this.

Thank you so much for this.

Great tutorial! I had a problem with my background image slowing down my site speed. I didn’t know about Kraken, I’ll be sure to use them in the future!

    Hanne Reply

    Hi Ray,

    Yes Kraken combined with uploading the image in the right size is golden for speeding up your website!

Very useful. Thank you. Always been baffled with images

Sherwood Reply

How do you discover who is retargeting you?

    Hanne Reply

    Hi Sherwood,

    I just pay attention to the different ads I see :) While most people ignore ads, I pay special attention to them and will mostly be using the web without adblocker ;-)

I’m using Thrive Themes and I think I have followed your advice accurately for my homepage image and branding. What do you think Hanne? https://neuroplan.ca

    Hanne Reply

    Hi Anna,

    Looking good :) I would darken the image a little more so that the white text is really what catches the eye (rather than the colors in the image).

I’m missing something. You mentioned, I think, not to use the picture w/ the text overlay created with the tools demoed in the video because google can’t read it and therefore it’s not good for SEO.

Question: How would the text be added once uploaded to the website such that it would readable for search engines and thus favorable for SEO purposes?

    Hanne Reply

    Hi Joe,

    We’re talking about background images here so you would upload the image to a section on your website, as the background image and then you can simply use text elements on that image (as if it was a plain background).

    This way the text is actually in the code of the website (in the HTML) and it can be read by search engines.

    You can see an example of this in the homepage from scratch video.

Hi! Thanks for the article!

I have a question…

In Thrive Content Builder and Thrive Landing Pages is it possible to add an overlay below the title so it can improve visibility?

Like in this page below, the date and button is in a overlay, but the title is not:
https://thrivethemes.com/?tcb_preview=corp-webinar-signup

Thanks!

    Hanne Reply

    Hi Claudio,

    This was done with custom CSS in the landing page template.
    It’s not (yet) a possibility in TCB.
    This is something we’re counting on adding in the new TCB 2.0.

Roxanne Reply

Thanks Hanne! As always, your posts are tres helpful and you rock.

Barbara Q Reply

You may want to exchange bear for bare in your second paragraph.

George Megas Reply

So helpful,thank you guys!

Great tutorial! How do you add text once you upload the finished image to your site?

Helen M Reply

Excellent tutorial, Hanne, and so timely for me. I’m busy updating my home page after your excellent 5-day challenge last week, and I was wondering how to get a professional-looking ‘muted’ image that didn’t overwhelm the title and intro text. Thank you so much. Now I can continue with my upgrade!

    Hanne Reply

    Hi Helen,

    So happy to hear this came at the perfect time for you and good luck with the homepage update!

Lee Whistler Reply

I love bright people who communicate well. They are my teachers and my inspiration to do things well. Sweet!

Thanks Hanne that was a very helpful tutorial!

Gracias por el tutorial

Thanks so much for great article and Video. Must have :)

Elizabeth R Reply

Thanks so much for this information. I was having a problem with my background pictures last night. I will redo the images on my Homepage and about page. Thanks again, I will be making some improvement on each page.

    Hanne Reply

    So happy to hear that Elizabeth. You’ll see this will improve your homepage and about page quite a lot :)

SHERALEE O Reply

Thanks Hanne, great tutorial. You talked about not adding the words to the image, but putting them on the website instead (for SEO reasons??). Could you explain or demonstrate how to do that please.

    Hanne Reply

    Hi Sheralee,

    Like I briefly explained, Google can not see what is written on an image. So text on an image just doesn’t exist for search engines. You need to have the text actually written on your page so that it shows up in your html code.

    To do so, you can upload the image as a background image (without text) and then add a text element over it.

    You can see how it’s done in this tutorial.

Thanks Hanna, this is very helpful!

adegoke.ajadi Reply

Thank you for this tutorial. I enjoyed it.

Really useful video–lots of new and helpful stuff. General comment: making the videos at the speed of the user, rather than your own speed, would make this new material easier to assimilate, and obviate the need to replay the things a bunch of times. Thanks!

    Hanne Reply

    Hi Al,

    Sorry if I was going too fast in the video. I’m very used to using PicMonkey so this is me slowing it down a bit :) But I’ll try to pace myself even more next time around.

This is a very helpful tutorial, Hanne.

I’ve been hoping though Thrive would add the overlay feature to TCB. Is that being considered for future releases by any chance?

Great, Hanne, real value, quick and clear. thanks, Ralph

Hanne, very helpful post.

Thank you for another great instruction video!

Great article, thanks Hanne. Question please, what is the best way to have a photo of yourself as the background image that will also work for mobile?

I had some professional photos taken and could either use one that is me with a nice green view behind me (grass and trees) or a cut out of me on a coloured background.

I have my arms outstretched to welcome people, with the idea that I’m on the left hand side of the page and the headline is on the right where my left hand is directing the viewer. (This isn’t yet on my homepage as I’ve been doing the Better Home Page challenge and got stuck with this.)

What I’m not sure of is on mobile won’t I disappear?

This is why I wondered if it would be better to have a plain colour background and then add the cut out of me as an image in a content container? So that would adjust for mobile?

What do you think is the best approach please? Thanks Una

    Hanne Reply

    Hi Una,

    Yes this is a tricky one for mobile.
    What I suggest is to have a background image (like the one with the trees and the grass) and have yourself cut out.
    Use a column layout to put “you” on the left side in the section and the text on the right side.
    This way on mobile, the image will stack with the text and the background image will scale.
    So the trees and the grass would scale (which is not a problem because it’s purely background) and you would either have your photo first and the text underneath it or if you choose the reverse column order, you can have the text first and you underneath it.

Harvey S Reply

Thank you Hanne.

Just to be clear though, if we are using Thrive Themes, the theme will automatically optimize the image like Kracken, right? So we don’t need to do that ourselves do we?
Thanks – Harvey

Rexx Reply

Great, informative video Hanne!

One question, can you please elaborate on your statement about NOT wanting to add/save text on your image while in PicMonkey, but instead adding the text later (once on the website, I believe)?

Is there a link or video that explains more about that and why?

Thanks!

    Hanne Reply

    Hi Rexx,

    The reason for this is that Google (and other search engines) can not read what is on an image. So for them, the text on the image just does not exist.

    That’s why for SEO reasons you should never include text on images if you want that text to help you rank.

    If you want to learn more about basic SEO, you can take our free Thrive University Course SEO if you don’t want to learn SEO

Bowen Reply

That was a really helpful tutorial Hanne, thank you for taking the time to put it together!

Pierre L Reply

This was very insightful. A lot of the benefit is psychological as well. These are great tips and suggestions. I am certain you could write a mini-book about the benefits and different kinds of backgrounds for different purposes.

    Hanne Reply

    Hi Pierre,

    That would be one ebook I would love to read for sure :)

Thank you Hanne, I don’t actually use an image on my Home page but loved this tutorial nonetheless. And thank you for those links, a couple of them are new to me.

    Hanne Reply

    Hi Joan,

    Happy to hear that. Now you’ll know what to do if you ever would like to use a background image :)

This landing page post is Gold, Hanne . I was aware of overlays and knew these image aides were generated in Photoshop Not being an expert in that very deep program it was an issue. I’m was aware of Pic Monkey, but I had never married the two. Thank you, Thank you, Thank you. This whole post will make my life so much easier.

I have said this before, but it’s worth repeating. I love hearing your accent Hanne. It’s a refreshing change from the ubiquitous American drawl. There is no offence intended to my very excellent American friends some of whom I love dearly. They have exported the culture amazingly, almost to a fault LOL But not only do you speak English as a second language, but you speak it very well Hanne

For me, I only have one language, and it is an arrogance on my part not to have two languages, something I am about to address by travelling to China and emerging myself in the Language.

    Hanne Reply

    Hi Robert,

    I’m very happy to hear that this tutorial saved the “not a Photoshop expert” problem for you.
    And I’m very grateful growing up in a small country with a language that almost no one understands which forced me to learn several others :)

Peter G Reply

Brilliant tutorial-many thanks

Shaun G Reply

Hi Hanne,

Great post. Super easy to follow.

Is it possible to choose which portion of the image will be displayed when using the background image in a page section? It seems like my image is larger than the section I want to use it on, and it looks quite zoomed.

I’m assuming a workaround would be to find out the height of the page section and crop the image to that height.

Who do you suggest?

http://thelovedrive.wpstagecoach.com/

The image is in the testimonials section and looks quite zoomed from what I uploaded.

    Hanne Reply

    Hi Shaun,

    You can not really choose which portion to show, but you can thick the box “full height image” this will automatically expand the section to the height of the image rather than stretching it out.

    Hope that helps :)

Great tutorial thank you

Great turorial ! Kudos

Marion M Reply

Thank you for this great tutorial. Don’t Thrive themes optimize images automatically?

    Hanne Reply

    Hi Marion,

    Like I explained in the post, yes if you use a Thrive Theme on your site you have the option to optimize images automatically :)

I’m still new to all of this. Thrive Themes has been a great help! I think I am good with the design I have chosen; however, it is still fun to read and learn new knowledge.

Thank you so much for sharing!

Hi Hanne….i have been to Pexel and downlaoded images as a 1920 pixel size…. then added an ovelay in picmokey….then uplaoed to my website through TCB….but when it is on website (clone of my home page) the picture is really grainy and pixelated…..even though i have the optimisation of Lossy on my site…
can you help?

Hi Hanne….i have been to Pexel and downlaoded images as a 1920 pixel size…. then added an ovelay in picmokey….then uplaoed to my website through TCB….but when it is on website (clone of my home page) the picture is really grainy and pixelated…..even though i have the optimisation of Lossy on my site…
can you help?

    Hanne Reply

    Hmm Jonathan,

    Without seeing the page it’s hard to tell… Seems like the image is stretched somehow.
    Can you click on “full height image” to see if that fixes the problem?

Joshua P Reply

Awesome, so helpful! Thank you!

Joshua P Reply

Question…

Once I turn on the Kraken feature in my ‘Thrive Themes Dashboard’ will this image optimization be applied to all the picture I upload within my pages too?

Thank you for your time :)

Great Article!!!!!!!

Thanks for tip. I’ll use it on my sites