Make the Background Images of Your Website Look More Professional in 4 Simple Steps
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.
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.
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.
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.
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
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!