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="https://destinationURL.com" target="_blank" class="takeover"></a>
Position the above code directly below your opening
1 | <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="https://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.
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.