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

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

More...

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, Stocksnap.io 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 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.

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

201

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?

    Thanks!

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

    http://thelovedrive.wpstagecoach.com/

    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.

  • Fantastic video Hanne. I especially appreciate your mention of the hero tutorial. I checked it out, It is exactly what I needed.

    Thanks

  • Very good video, all of your videos are very good! But the background images destroy my performance. in the moment i measure with different tools like gtmetrix and they tell me about 1,2 seconds for my homepage (it´s a LP) !! So all background images are removed, only small pictures are allowed on my sites. And of course with lazy loading too. Thanks for your engagement!

    • Hi Manfred,

      Yes you’ll always have better performance in speed without images. Although having an optimized image can already make a huuuge difference!

  • Hi Hanne, I thought that Kraken was “in side” Thrive Themes as an automatic feature? did I misunderstand that?

    Fantastic video – thanks 🙂

  • Hanne, thanks so much, this was great. I wasn’t even aware that I could adjust my site (and need to adjust my site) for mobile! I know that wasn’t the point of your lesson but more valuable for me 🙂

  • Hey there Hanne, another fab tutorial to start the day. Hanne, if on mobile view, one uses a smaller optimised image for mobile, will it be that the page is loading both elements or will this speed page loads? Second question. Can one click on the ‘image size’ view in ‘mobile’ and change it to a smaller size to load or does this type of change now affect all responsive view?

    • When you edit the image in mobile, it will only affect the mobile view. So if you delete the original and upload a smaller image, it will load that smaller image on mobile.

  • One further quick question Hanne, do you have a tutorial that explains the difference between using a Thrive Theme vs Thrive Architect on a basic WP Theme? I noted your comment about being able to hide top elements within a Thrive Theme – just wondering specifically what other differences / advantages for Thrive Themes. Thank you so much 🙂

  • Hi Hanne
    Thanks for your video.
    You mention that for the mobile view it it is sometimes worth considering using a colour rather than an image as the background to a ensure fast-loading page on mobiles. Is it possible in Thrive Architect to load a different version of the image (eg only 500px wide) to load only on mobile views? – that way one can use the image (if that works in the mobile design) and have the benefit of a fast-loading page – as the image will be so much smaller in Kb size than the 1920 width image. Thanks Peter

    • Yes it is.

      Go to mobile view and delete the original image, then upload the smaller image and you’re good to go.

    • I film with an EOS 650 reflex camera and screencast with Camtasia. Then our video editor does all the magic to get the bubble effect. If you want to try this yourself, he made a tutorial on it here.

      • Hello Hanne,

        I have one final question on this matter.

        What happens if, after I pushed the image through Kraken.io to get the optimized version of it, I push it through the service once again? will this optimize it further? or is this something not recommended.

        Thanks.

        Luis

  • Hey Hanne,

    thanks for the tutorial.

    I have 1 question concerning the background colour. Why did you choose a green bg colour first? Can the visitor see it through the bg picture?

    Thank you!

    • No not as long as the background image is full opacity.
      But like I explain in the video you want to pick a dark background color so that the white text is readable.
      I picked green purely for a design purpose 😀 Could have picked black.

  • Thanks for another useful post.
    I use tinyjpg.com to reduce image weight, it usually reduce around 70% and keeps high quality look on web.

  • Hi Hanne, Thanks again for an easy to follow tutorial! I’m finding that I’m looking forward to every email from Thrive Themes as each lesson helps me to improve my abilities with this amazing tool set, cheers!

  • Hi Hanne

    This is an excellent tutorial as usual. Thank you!

    One issue I consistently have is with the mobile and tablet images not showing well. They look terrible when I look at them on review and when I look at them on my iphone and ipad. I did everything you suggested here but still get a poor image.

    I resolve this problem by reloading the image and the second overlay in the tablet and mobile responsive views. They show up well on all devices except the ipad in landscape view.

    This is the only way I’ve been able to resolve this. I would like your thoughts on any issues you might forsee doing it this way. Also – why doesn’t it look good on the tablet landscape view?

    Thanks.

    Kirsty

    • Hi Kirsty that’s really weird…
      Are you sure you’re loading the right size image?
      If this keeps happening, I would take it up on the support forum cause it’s not supposed to do that!

  • Hi Hanne, great post!

    Just two questions:

    1)Should thrive members use the built-in kraken.io integration for better results?

    2)In thrive Architect if you modify an element in the desktop view is it modified for all views? Instead are all the modfications made in the mobile view applied only for the mobile representation of the site?

    • Hi Umberto,

      1) Yes if you’re using a Thrive Theme, you can use the image optimization that’s build in. No need to go via Kraken anymore 🙂

      2) That’s exact. Editing cascades down so desktop modification apply on desktop, tablet and mobile. Mobile edits only for the mobile view.

    • If you optimize your image it shouldn’t make much difference (but off course solid color will always win).

  • I was told that my Thrive Themes (Rise, Minus, etc) automatically compressed my media images with Kraken because the theme needed various different sizes and would generate the right ones. Is that still true, or do I have to compress my big images to 1920 as you say in your checklist? Thank you

  • Hello, thanks for all the tips but one question. How can i have the normal header and menu (and also footer) when I’m using your way to create the page i didn’t find any option to get the normal header/menu and footer as if I use normal way to create a page. Thanks for your answer

    • Hi Nicolas,

      If you have a Thrive Themes theme installed, you can pick the “full width” page and start designing from there (rather than from a landing page) this will allow you to keep the footer and the header.

      • Mmmmhh… I do not understand. Because if I use the normal full width, i can’t add the gradiant to the picture or choose any option.

      • Hi Nicolas, you would not use the image of the theme. But add a background section and then add the image and the overlay…

  • I don’t have the option to change where the image shrinks from. I wanted to know if I am missing something.

    • Hi Robyn, make sure your Thrive Architect is up to date. If you still don’t see the option, please open a ticket on our support forum. They’ll be able to help you out.

  • Hi Hanne,

    I am using the Thrive Pressive Theme and Thrive Architect. Is there any way to change the Header Photo like you showed it in your video with Thrive Architect?
    I only found the possibility to change the image in the Titel section content, but I can’t edit it with Thrive Architect.

    Do you have any tip for me?

    • Hi Carola,
      The theme header is part of the theme (in this case pressive) and you won’t be able to change it with Thrive Architect.
      If you want full control, then you can start from a blank landing page (which overwrites the theme) and use only Thrive Architect.

  • Hi Hanne,

    I’ve uploaded many different file sizes, but no matter what size I change my image to, when I upload it as a background, the quality is horrible. When I upload as a standard image, full length, it uploads high quality. I’m not sure what’s happening here.

    • Hi Mark,

      My guess would be that in the WordPress image gallery the size is set to something like medium rather than full width. When you insert the image, in the right sidebar (where you can add a title and alt tag etc.) in the WordPress gallery there is a drop down with the size. If that’s set to less than full size, your image will always be blurry. https://cl.ly/0g440o440v0W

  • Hey Hanne,

    I’m having trouble changing the background image in the templates. I’ve looked everywhere possible.

    • Hi Tom,

      What template are you talking about?
      Background images are usually in the background section or in a content box. Both can be changed from the background options.

    • I agree, you should always keep the image as light as possible (by using a service like Kraken.io for example)

  • I’ve created a landing page, however there is no instruction on how to link it in my WordPress Site. I have a separate page that I have created using Thrive Architect, but this page isn’t showing the saved page created in Thrive Architect in my WordPress site. What am I missing???

    • Hi Kem,

      Sorry I’m not sure I understand your issue? What do you mean with “link it”? Do you want it in your top menu? (in that case you go into apprearances – menus and you can add it)

  • Hi!
    I’ve added a background image and was able to move it on the desktop version so that it would focus on the main message, however, I can’t seem to move it on the mobile version. This means that on the mobile version the focus is on a lamp instead of on the people. How do I move the image upwards?
    Thanks in advance for your reply!
    Ana

  • {"email":"Email address invalid","url":"Website address invalid","required":"Required field missing"}