Clickable Background Takeover Ads

For the past few days, I wrote three blog posts on how to configure three modules: Drupal Background Images Module Configuration Manual, Drupal Background Images Formatter Module Configuration Manual & Drupal BackgroundField Module Configuration Manual

Today I'll finally reveal how to create clickable background takeover ads, something that I once thought was impossible. I'll use Drupal as an example, but the concept itself of clickable images as background takeover advertisements should apply to just about any type of website. I'll also use CSS, because it's the easiest method to understand and use. I believe other possible methods for creating any type of clickable background takeover images include using JavaScript.

But first I would like to give a huge thanks to Malcolm Young, who provided the inspiration for me to finally get this technology working exactly the way I want it:

Thanks to @malcomio, #ClickableBackgroundTakeoverAds are now 100% possible with CSS: https://t.co/KfwnUC0pRA #Advertisements #Images @drupal

— Jay L.ee (@wwwjaylee) May 10, 2016

Malcolm, you rock man! :)

Let's take a quick look at the source of my inspiration, his patch in response to an issue that I created in the issue queue of Background Images:

What it does is that it basically adds a link field to admin/content/background-images, described in step #5 of the Drupal Background Images Module Configuration Manual. Malcolm is probably not the first person on the planet to come up with the essential pieces of CSS code (shown in step #7 below) to make clickable background images in general, but it was the first time I've actually seen it work in person. I finally had my "a-ha" moment. ;)

There was one problem though, where the entire screen became a clickable link. But it gave me enough motivation to inspire me to further my research (which originally began a few years ago) and eventually make it work. So after all these years of frustration over trying to get this simple yet esoteric technology to work, I finally got it fully working.

So are you ready? Here we go:

1) Upload a background image to use as an ad using whatever module you decide to use. Whether it be BackgroundField, Background Images, Background Images Formatter or Dynamic Background, it doesn't matter.

2) Install and enable the Link module.

3) Go to whichever content type you want to apply the background image to, click the "MANAGE FIELDS" tab and create a new field ("FIELD TYPE": "Link") for the background image link that will be clicked on: admin/structure/types/manage/CONTENT-TYPE/fields

4) Click the "MANAGE DISPLAY" tab and change the "FORMAT" of the background image link to "", because of the next step: admin/structure/types/manage/CONTENT-TYPE/display

5) So are you ready to learn how the concept of a clickable image as a background takeover advertisement really works? Here is the first secret: You must somehow move the link field to somewhere above the main content region but below the header, because this is the only way that the entire main content region itself will not become clickable, since that's where the link field itself is originally part of. For most themes, this can be done via adding some code to the page.tpl.php file. It should look something like the following for Bootstrap (put it between "main-wrapper" & "main-container"):

if (!empty($node)) :
$field_background_image_link = field_get_items('node', $node, 'field_background_image_link');
if ($field_background_image_link):
$background_image_link = field_view_field('node', $node, 'field_background_image_link', array('label'=>'hidden'));
print drupal_render($background_image_link);
endif;
endif;
?>

6) Next you still have to apply proper CSS code to the main content region. The code should look something like the following for Bootstrap:

.main-container {
position: relative;
}

7) And here is the second and biggest secret: You must apply proper CSS code to the link field. The code should look something like the following:

.background-image-link a {
height: 100%;
width: 100%;
position: fixed;
left: 0px;
top: 0px;
opacity: 0;
}

8) At this point, pretty much the entire screen should be clickable, except the main content region because we already took care of that in steps #5 & #6. So let's take care of this problem by first applying proper CSS to the header so that it's not clickable anymore. The code should look something like the following for Bootstrap:

.navbar {
position: relative;
z-index: 10;
}

9) Now let's finish up by applying similar CSS to the footer. The code should look something like the following for Bootstrap:

.footer {
position: relative;
}

It's worth mentioning that you need to go through some trial and error to get the CSS right for whatever theme you're using (notice that the CSS code above is a bit different for the header & footer). I'm not an expert by any means, but feel free to leave a comment and I'll do my very best to help out. And that's all for today. Peace! :)

P.S. I'm currently moving ALL of my websites to Bootstrap, so I will most likely provide an update here in the next few weeks regarding anything specifically related to this awesome theme that might provide further help. Stay tuned!