Background Ad Takeover for WordPress

I’m sure we’ve all seen background ad takeovers as they take up the wallpaper or background screen of the site you are visiting. These types of ad backgrounds are popular with entertainment sites because they give advertisers large visual space to promote an event, movie, game release…just about anything. Takeover ads work great with fixed width sites and can create a nice call to action, as seen in the samples below:



Now that we have an idea of what type of ads we are talking about, let’s move ahead and work toward displaying an ad solely on the homepage of your site.

Targeting Your WordPress Home Page
If we only want our background ad to appear on the homepage of our site we will use a simple statement to check if the home page is the current page. We will also want to target your homepage with a custom background so we will be making sure that your body class on the main page is being displayed. The content we will be editing will normally be found in your header.php but look in your template for where your tag begins.

With a small change WordPress can let you apply a class of options to your body tag based on what page you are on. For example a single post page on my site such as this page has the body class of:

class="single single-post postid-910 single-format-standard logged-in"

To get the above, let’s make sure our tag looks like the one below.

<body <?php body_class(); ?>>

Directly after your updated body tag we will be using an if statement to see wether or not your WordPress site is displaying the front page.

<?php 
if (is_front_page()) echo '<a style="height:1200px;" id="ad_bg" href="http://gabediaz.com" target="_blank">&nbsp;</a><div id="wrapOuter">
'; else echo '<div id="wrapOuter">';
?>

What the above means:
Here WordPress checks to see if your site is displaying your front page. If so, your site body will be starting with a link that is 1200px in height and includes the empty anchor text which points to your banner’s target landing page before starting your body content. Else, if your visitor is on any other page on your site, WordPress will begin your site body with a regular div expression, in this case it’s [div id="wrapOuter"]. In both cases your site body will begin with some type of container, the if statement just figures out if it should add in an empty link prior to your content.

The close of your head tag, the start of your body tag and the beginning of your content wrapper should look like the following (please note: your div id will be different):

</head>
 
<body <?php body_class(); ?>>
 
<?php 
if (is_front_page()) echo '<a style="height:1200px;" id="ad_bg" href="http://gabediaz.com" target="_blank">&nbsp;</a><div id="wrapOuter">
'; else echo '<div id="wrapOuter">';
?>

*If you want the same ad to appear throughout your site on every page, use the following format. You do not need to use an if statement, just insert your link right after your body tag. Apply your background to your main body with CSS.

</head>
 
<body <?php body_class(); ?>>
 
<a style="height:1200px;" id="ad_bg" href="http://google.com" target="_blank">&nbsp;</a>

Adding Some CSS Properties to Your URL
We want to make sure the clickable area of our background spans the length and width of our window as well as changes the mouse pointer on rollover to the pointer finger.

#ad_bg{
top: 0;
left:0;
position: absolute;
display: inline;
width: 100%;
cursor: pointer;}

Please Note
Above we are giving the URL an absolute positon

position: absolute;

This will span the URL across your viewport and unless your middle content area or wrapper class has a relative position this URL will basically cover all of your pages links. So check for or add the following to your middle content ID or Class.

position: relative;

Setting Your New Background with CSS
Lastly we set a new background image to be seen only on the main page with a little CSS. This is where our body class tags work to our advantage. Since we are on the front page our body will have a class of “home”

Add to your style.css file:

.home{
background:url('ReallyCoolBackgroundImageTakeOver.jpg');
background-position:top center;
background-repeat:no-repeat;
background-attachment:fixed;}

For the .home class we are setting a background image, aligning it to the top and center of our site, not repeating the image vertically or horizontally and making the background image fixed in place. The property “background-attachment:fixed;” means that when a user scrolls down a page, the background will stay put while only the center site content will scroll down. This is done to keep your background ad in position and visible no matter how far a user scrolls down your page.

See It In Action
Before I link to a test page with these theme, here are some things to consider:

1) This theme is responsive, so it breaks when adding a background takeover. Why? Well because the only fixed column in the theme is the left most sidebar column. The center column and right column are floated and due to this the background becomes clickable for 2/3 of the width of the page.
2) To correct this I added an additional container around my content div and set the margin to auto to center it.
3) I was able to use the same “if statement” from above to make the new container div appear only on this test page.
4) The demo page is an actual Page from this very WordPress installation, it’s not on a Demo install. It’s actually a good example of being target specific pages by their body class and with an array or if statements. You could essentially have a different background for every section, page or post in your WordPress installation.
5) The demo page: Sample Background Takeover

Extending Functionality – Added December 4, 2012

Joe in the comments asks:

If I have categories or single posts / pages where I want a specific background image tied to, what would the code look like?

Great question, the answer to this question alone, along with all the possibilities is a complete post in itself but I’ll quickly show you how easy it is to add a background ad to a targeted Page, very similar to targeting the Home Page. As mentioned above, the sample page: Sample Background Takeover is a Single Page from this site with background in action, here’s the code that specifically targets the Page Sample Background Takeover.

In my header.php

<?php 
if (is_page(933)) echo '<a style="height:1200px;" id="ad_bg" href="http://google.com" target="_blank">&nbsp;</a><div id="wrapper"><div id="wrap" class="clearfix">
'; else echo '<div id="wrap" class="clearfix">';
?>

In my footer.php:

<?php 
if (is_page(933)) echo '</div></div><!--end Wrap-->'; else echo '</div><!--end Wrap-->';
?>

Added to css file:

.page-id-933{
background:url('Safe_Skin_FINAL_v2.jpeg');
background-position:top center;
background-repeat:no-repeat;
background-attachment:fixed;}

Using the same format above, with if statements, you could target the Home Page and a Single Page (by ID, slug, title etc.). View the Conditional Tags page in the WordPress Codex for more conditional samples.

About Gabe Diaz

Gabe Diaz is web professional and consultant focusing on design and development, currently based out of South FL. When not geeking out on the internet you will find him spending time with his children. You can also find him on Google+: +Gabe Diaz, Twitter: @GabeDiaz and Facebook: GabeDiaz.

30. April 2012 by Gabe Diaz
Categories: Blog | Tags: | 28 comments

Comments (28)

  1. Awesome Gabe! Took me a long time to get a clickable background in WordPress, once I found this page it was much easier. Thanks!

    Perhaps you could make an additional post on how to apply different backgrounds/links to specific pages/sections of a site? trying to figure that out now using conditional tags but it’s a slow trial & error/learn as I go process.

    Thanks again!

  2. Great Article, did exactly what I was looking for. Thanks for the help.

  3. Hey Gabe,
    You just saved my life with this tutorial!
    :)
    Works like a charme.

    However, I wanted the background on every single page, so I changed “.home” to “body” in the css.

    If I have categories or single posts / pages where I want a specific background image tied to, what would the code look like?

    Cheers

    Joe

    • Hi Joe,

      I updated the article on the bottom with how I ended up targeting the sample page. Similar technique can be used (if statements) for categories or other single pages. For single posts you could target by ID, title or slug OR if you want all single posts from the same category I would suggest a single post template OR you may even be able to use “if ( in_category(‘Cat Name’) )” in your header. Haven’t tested/tried in_category but it should work.

      -Gabe

  4. Good stuff. I am a fan now.

  5. I am just a beginner and not able to understand & follow all the methods you have mentioned to implement the back ground ads .

    Can it explained in a simpler manner ( for beginners like me ) or is there any plugin for this ?

    Advance Thanks for your help !

  6. Hey Gabe,

    Any idea how to implement OpenX Advertising Code into this scenario? I’d like the background image delivered by OpenX.

    Best,

    Adam – GuitarGeek.Com

  7. I am implementing this for all pages, not just the home page. and the example defines a 1200 x 100% hit state that seems to override my entire page. I have a example
    beta.theworldsbestever.com where i am trying to test it. and it overrides all of my other links. can you take a look and tell me what I am doing wrong

  8. Hi Gabe,
    Thanks for sharing this. This would be real helpful.
    Question I have is can I use your code with plugins like AdRotate to manage the background image as an ad? If so how?

    Thanks.

  9. This should be released as a plugin so n00bs like me could do it.

  10. Big big thanks for this article, search during 1 weeks to find a working solution for wordpress to make clickable backgroung.
    work perfectly with wp 3.6
    thanks again !!!!

  11. Now my whole page is clickable! How to make only the background clickable? http://leukemie-symptomen.nl

  12. Banging my head trying to find out where I add the following:

    #ad_bg{
    top: 0;
    left:0;
    position: absolute;
    display: inline;
    width: 100%;
    cursor: pointer;}

  13. Many thanks for this wonderfull article. I test it and work fine!

  14. Hi Gabe,
    thank you very much for this guide! Very useful!
    I have search a lot something of this and now… i have found and solve my problem! :)

    Happy New Year! Bye

  15. Great Gabe! Thanks for your notes. For the bd_ad CSS, I think is better to use…

    position: fixed;

    This avoids the anchor to go up as the user scrolls down the page.

    Also, for ‘<a style="height:1200px;" id="ad_bg"…' is better to write height:100% -this adapts the anchor to the height of the user browser -you know, there are new monitors from LG and other companies that can be used in vertical.

    Best,
    José Antonio

  16. I really want this on our site but have this issue:

    The site does NOT have a static front page and therefore uses latest posts as its main home page.

    Therefore cannot get to work

    Any ideas?

    Regards
    Dave

  17. You should make this as a wordpress plugin and sell it on codecanyon.

    i have search it alot and no one has made it yet.

    i will buy it :)

  18. found with the responsive theme I was working on (sahifra) that the wrapper div you add you also need to add a max-width to the CSS otherwise the wrapper div will take up 100% of the browser window too. if you find that you are having a problem and the wrapper div is taking up 100% of the browser window, find the break point and set this as max-width … then it should work. Hope this helps someone.

Leave a Reply

Required fields are marked *