Make the Background Images of Your Website Look More Professional in 4 Simple Steps

Hanne   201

This one element can make your homepage or landing page look very professional or really amateurish...

The problematic element? Your background image.

After looking at hundreds of homepages and landing pages we keep seeing the same issues over and over again.

These issues hurt your conversions and your brand.

Fortunately, with Thrive Theme Builder and Thrive Architect, it’s incredibly easy to create beautiful background images for your pages and page templates.

With Thrive Theme Builder you can create page and post templates for any purpose and use the drag-and-drop editor to add your background images, gradients, and patterns, so all your pages and posts are automatically populated with your custom design choices.

Thrive Architect let’s you visually design gorgeous single-use pages (like landing pages for marketing) and posts, so you can customize individual pages to your heart's content. 

The good news is that you can fix your background designs  in 4 simple steps!

In this post you will discover how to:

  • Pick the right image from our favorite free stock photo resources
  • Optimize the image for faster loading
  • Make the image suitable as a background image without using any photo editing tools
  • Make your mobile readers happy too

Ready? Let's get started!


The Most Common Problems With Website Background Images

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

The Obvious: 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 or landing page is the most important element of that 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 Less Obvious: ​Brand Image and Clarity

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.

I talked about this in depth in the article "How to Use Free Stock Photos on Your Website Without Hurting Your Conversions".

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.

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, gradients 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 fitness related.

Bad website background image example

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. 

Follow the next 4 steps and you'll never have these problems again on your site.

Step 1: What Photo Should You Choose as Your Background Image?

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, or Pexels and put the words in the search engine to see what comes up.

Of 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.

good and bad website background images

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.

Step 2: The Need For Speed

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

This sounds complicated but is actually super simple!

Go to, 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.

Step 3: Improve the Readability of Your Text Overlays

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

What this simple trick?

Adding a color overlay on top of your background image.

With Thrive Theme Builder (for your site-wide theme customizations) and Thrive Architect (for your single-use page and post customizations), this is really easy. You won't need a separate photo edition tool!

  • Add a background section to your page and make that section full width (4.46 min)
  • In the "Background Style" menu add first a solid color (this will allow your text overlay to be readable even when your photo is still loading). (5.02 min)
  • Then add a second background layer. This time choose the image overlay and insert your background image. Make sure the dimensions are set to "full width". (6.15 min)
  • Now, add a third background layer. This time add a color overlay but reduce the opacity to make the photo visible again. Typically, adding a white (#ffffff) or black (#000000) overlay works best. (8.18 min)
  • That's it!

If you want to go fancy, you could add a gradient overlay instead of a solid color on top of the image.

And if you're looking to use a photo of yourself then you suggest checking out this tutorial: Create a Pro Looking Hero Image Header

Step 4: Make Your Mobile Visitors Happy

These type of big background images look amazing on desktop. But what about mobile?

The very first question is, do you want this image to show on mobile? Maybe you can just simply use a colored or gradient background.

In that case, go to the mobile view and delete the background image.

If you want to keep the background image, make sure to:

  • Reduce the text size of the title (9.28 min)
  • Decide where you want the image to be scaled from. This will have an impact on which part of the image is shown. (9.39 min)
  • Reduce the background section height. (10.30 min)

Website Background Image Checklist

  • Choose a photo with uniform colors from Pixabay, Stocksnap or Pexels.
  • Download it at 1920 px width.
  • Reduce the weight of the image with Kraken.
  • On your site, add a background section and set it to "Stretch to fit screen width".
  • Add a solid color as the first background layer (dark color if light text, light color if dark text).
  • Add background image at full size as the second layer.
  • Add white or black overlay and set opacity at less than 100% so that the photo shows as the third layer.
  • Check and optimize mobile view by either removing the image or switching the anchor point.

It's Your Turn Now to Create Stunning Background Images

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!

If you want to learn more about how to add background sections to your pages, check out this Thrive Knowledge Base article on background sections.

by Hanne  May 8, 2019


Enjoyed this article ?

You might also like:

Leave a Comment

  • 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? 🙂

    • 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 🙂

  • 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!

    • Hi Ray,

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

    • 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 😉

    • 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?

    • 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.

  • 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!

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

  • 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.

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

  • 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.

    • 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.

  • 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!

    • 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.

  • 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

    • 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.

  • 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

  • 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?


    • 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

  • 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.

  • 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.

    • 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.

    • 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 🙂

  • 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?

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

    • 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 🙂

  • 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.

    • 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?

    • 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?

  • 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 🙂

  • Thanks for the tips and tutorial, Hanne!

    They’ve been very helpful! Will use them when creating our new homepage design to create a background image!

  • Thanks Hanna
    Text, images and backgrounds were an issue at the time to design webpages on my site, but now I figured out how to do it easier after I read your article. Thanks again! And you are right, my thrive theme optimizes my images by itself…..

    • Hello,

      Many elements (content boxes, background sections, buttons and more) have a “Background Style” option in the sidebar. There, you can add colors, images, patterns and gradients to the background.

  • HI Hanne..thank you. What about dimensions for the various mobile sizes? I noticed Architect only has 3 but there are so many more options… like tablet horizontal and vertical as well as phone horizontal and vertical. Plus some screen are yet bigger than others. What should use as a standard so that my background image looks good with text on any or at least most of these screens?

    • Hi Tracy when your site looks good on this three sizes, it will most likely look good on the sizes in between. If you want to check, use F12 to get the inspection/developer tools and use the responsive view to check.

  • Perfect teaching / presentation thanks.
    I’m building a new website right now, therefore I was interested.
    My old website is an html site built with Mobirise.