How to create a clickable background image in WordPress

Making background images and advertisements clickable

Clickable Background WordPress
Image Source: UnboxScience – Pixabay.com / License: CC0 Public Domain

You may have seen advertisements that cover a website’s entire background. These clickable background images are called Takeover Ads as they can literally takeover the entire appearance of a website for maximum exposure. Implementing clickable background advertisements into WordPress themes is a straight-forward process and can be accomplished in no time at all, using just a standard child theme with some simple HTML/CSS modifications.

Before you start implementing the clickable background, please first set your background image or background advertisement banner. To upload a background image in WordPress, please navigate to Appearance => Background in your WordPress dashboard and select a suitable background for your site.

Implement the HTML

Now let’s start. Create your child theme including all necessary files and copy the original header.php file of your WordPress theme into your child theme. First you’ll need to add an anchor tag which contains the destination URL – the website where your background advertisement should link to:

<a href="http://destinationURL.com" target="_blank" class="takeover"></a>

Position the above code directly below your opening <body> tag, but before the div that contains your website’s contents. Typically this div could be called wrapper or container, but may vary so you will need to ensure you have selected the correct content div. The link also has the takeover class applied to it, so you can manipulate it using CSS. Your code should resemble something like this:

<body>
<a href="http://destinationURL.com" target="_blank" class="takeover"></a>
<div class="container">
<!-- Your Site Content Here -->
...

Add the custom CSS

To make your background image clickable, you’ll now need to position your link tag behind your website’s contents – laying on top of your background image. You can achieve that by adding a few lines of simple CSS within the style.css file of your child theme, like so:

.takeover { 
    position: absolute; 
    display: block; 
    width: 100%; 
    height: 100%; 
    z-index: 1; 
    cursor: pointer; 
}
.container { 
    position: relative; 
    z-index: 999; 
}

Using the above CSS code you have applied absolute positioning to the link and relative positioning to the div that contains your contents. The z-index property positions the div and link on top of each other. You can define the stack order of these two layers by giving the link a lower z-index value than the div container. This instructs the link to be positioned below the contents div.

Set the background image

All you’ve done so far is positioning a link on top of your existing background image, so you can continue to use the default background image option as usual. This allows you to easily change which advertisement image you would like to use on your website without changing any code.

Images in WordPress
Image Source: Simon – Pixabay.com / License: CC0 Public Domain

By the way, if you prefer to implement a clickable background image for your website by using an external source, instead of creating a child theme by yourself, you could also make use of suitable plugins, like WP-Backgrounds Lite or Custom Backgrounds for WordPress. But please note, we have not tested any of these plugins. For assistance while using these plugins, you could contact the plugin developers directly.

Conclusion: Creating clickable background images

That’s all there is to it. Whichever background image or background advertisement you have chosen to use for your WordPress website, will now be clickable, directing website visitors to the URL you defined within the header.php file of your custom child theme.

Offering potential sponsors and advertisers the opportunity to takeover your site is a very attractive avenue of exposure that no other advertisement position can equal. Coupled with additional advertisements in prime locations such as the header, sidebar and footer, you can offer multiple advertisement packages allowing you to bring in additional online revenue.

Share this with your friends

3 Comments

  1. Does the MH Magazine theme allow the background image to also be a clickable link? It would be great for my website as this would be considered good advertising space for our clients.

    • Hi Alex, in WordPress you usually can’t make background images clickable out of the box. But by following the above tutorial, you should be able to implement this within a custom child theme or you could use one of the mentioned plugins for clickable background images.

  2. Hi. Thanks, got it working, but the click only works to the end of the page before you scroll, below the scroll no click. Seems height: 100% only stretches the first visible part of the page.

Leave a Comment

Your email address will not be published.


*