How background image changed my website and business

You open a website, feel a bit of excitement and click a button to proceed with a purchase, subscription, or whatever. This is a dream scenario for every business owner, growth hacker, and so on.

What makes you trigger your mind to make a decision? Obviously, a lot of factors influencing you from inside and outside environment. We will not talk about inner triggers, although they are important. Yet, as a business owner, you have limited options to influence these factors. On the other side, outside factors that you can display on your website make the difference. It can be price, discount, tagline, or an image … somewhere in the background.

We often see websites with a simple tagline all over the screen accompanied by the background image. For someone, it can mean nothing more than a simple decoration so your website background is not plain white, but not for us. Web design experts often use background images as an efficient tool to give this feeling of excitement and wonder, because ‘A picture is worth a thousand words’.

It takes less than 3 seconds for them to decide if they will stay on the site or go away for good! Click To Tweet

Most of the website visitors are lazy in reading a bunch of titles and descriptions. In fact, it takes less than 3 seconds for them to decide if they will stay on the site or go away for good. And you can’t read much in 3 seconds. This is why experts use images to drag our attention to the certain content and provoke to build a story in our mind.

Background image as a story

You have a beautiful tagline that states the main problem your product or service will resolve. If it is that good, it will probably trigger a fantasy in the mind of your visitor, something like ‘How it will change my life’ or ‘How it will impact my business’. This is where your background image can come into place to help customer imagine success that will follow.

For example, you have a website builder (I like to use real examples) – now having a website builder will help you to create your own website without coding and design skills. As result, you will stand in the same line with a pro web designers by having a professional website. Who are you? You are an artist who is capable creating his own masterpiece – just like those guys who have studied hard to be there.

Example of hero background image with tagline and call to action

As a website owner, you need to provoke this feeling in your visitors and help their fantasy to evolve. Place an image that can be associated with this state of mind and desire to become better.

Sounds easy? It truly is, but you have to avoid two very important mistakes people often make.

No place for imagination

Business people often give too many details to present a whole story to their customers by leaving no place for imagination. We tend to think that people won’t understand our vision or the image we choose is not provocative enough.

The image should only trigger the excitement and not lead your customer through the whole process. Give your customers a chance to tell their own story as we all have our own path to make.

False story

A lot of startups fail because of overestimating their products and services. We tend to think that our products will completely change the life of our customers. In reality, things don’t work that way. Yet, we keep on seeing soft drinks that help to ‘build families’ or chairs that ‘close the deals’.

It may sound harsh, but these businesses are lying to their customers and themselves. Probably, they even believe that their soft drinks can impact life that much. My wife did not say ‘Yes’ to me because of me drinking a lemonade 🙂

Now, once you decide to use a background image, think twice if your story is not false.

How to add and adjust background image

Once we are clear with our tagline and story behind it, it is about time to do the technical side of the deal. We need to select the right image and ensure it fits into our website.

Find background image

This could be the hardest part, even there are plenty of premium and free stock photo sites available.

I work with images a lot, and most frustrating part is to browse through the piles of categories and sets of images to discover the one that ‘gives excitement’.

During those years, I have come to the simple technique on how to discover right image. No matter which resource you use, start with a search to sort out images associated with the topic you want to deliver. For example, if you are looking for an artist simply enter ‘painting’ in the search query window and it will narrow your search to probably a hundred results.

The next step I like to call ‘Eye-catcher’ which means I simply scroll down the list with approx. 10 images displayed on my screen at the time and look for an image that catches my attention. Remember, your customers will browse through different websites and will see plenty of images, so you need an image that stands out from the rest. And there is no better way to discover such image than placing it into the pile of other similar images. This technique helps me to narrow my results to 3 to 5 images which I then evaluate according to other preferences.

Image contrast

Your image plays a significant role, yet you don’t want it to ‘eat’ your tagline and ‘Call to action’ button. It could be an awesome and provocative image, but if your content is lost then it has no meaning.

An option for quick overlay effect for your image in Visual Composer
An option for quick overlay effect for your image in Visual Composer

To overcome this, you can either look for another image or manipulate with this one by changing saturation or brightness so your content will stay on top of it. For complex manipulations, you may require some graphic tools, like Photoshop or Sketch to adjust settings. Nevertheless, sometimes it is enough to place a simple overlay that can be accomplished via Design Options of the website builders, or even place a gradient overlay to give your image a nice Instagram style effect.

Image style and position

Your website and image may have very different sizes and proportions. It is always important to optimize size and dimensions of your image to get your website load faster (and it will impact your SEO ranking as well). But even then, you may have troubles with some important part of your image ‘hidden’ because of not fitting in.

Thanks to CSS properties (I know it is uncommon to thank CSS for anything) we have an option to control background image style and position. This allows us to align background images with the sections so that nothing is missing. We can use ‘contain’, ‘repeat’, ‘no repeat’ and other style properties for our background image and also adjust horizontal and vertical positions with a few lines of code, or few clicks in Design Options if you are using a website builder.

Image position control for backgrounds in Visual Composer
Image position control for backgrounds in Visual Composer

As result, we have a perfectly aligned image with right overlay and strong tagline – a hero section that serves as a trigger to provoke a fantasy of our potential customers.

Conclusions

Now we know that background image is a powerful tool that can be used to create a short path to your business goals. To go further, we can think about incorporating background slideshows or even video background to add dynamics to our website and receive even better results. Do you like to use background images on your website?