AdPlugg Wallpaper Ad Demo

Learn how to make a wallpaper ad with AdPlugg!

by AdPlugg

HTML

<div id="background-div">
    <div class="adplugg-tag" data-adplugg-zone="oodxxk4c"></div>
</div>
<div id="content-div">
    <h1>AdPlugg Wallpaper Ad Demo</h1>
    <p>
        This fiddle shows you how to use AdPlugg to make a
        wallpaper ad (also known as a background ad). The
        ad is just a simple image ad. We've used css to
        place the background-div behind the content-div.
        We've then put the AdPlugg Ad Tag into the
        background div.
    </p>
    <p>
        Get your own <a href="http://www.adplugg.com" title="ad server">ad
        server</a> at adplugg.com.
    </p>
</div>

CSS

html, body {
    margin: 0;
    padding: 0;
    font-family: sans-serif;
    color: #333;
    line-height: 1.3;
}
#background-div {
    z-index: 1;
    position: absolute;
    width: 100%;
    overflow: hidden;
}
#content-div {
    z-index: 2;
    width: 80%;
    position: absolute;
    left: 10%;
    margin-left: -2%;
    background-color: white;
    min-height: 300px;
    padding: 1em;
}

JavaScript

//This is just the standard AdPlugg SDK.
(function(ac) {
    var d = document, s = 'script', id = 'adplugg-adjs';
    var js, fjs = d.getElementsByTagName(s)[0];
    if (d.getElementById(id)) return;
    js = d.createElement(s); js.id = id;
    js.src = '//www.adplugg.com/apusers/serve/' + ac + '/js/1.1/ad.js';
      fjs.parentNode.insertBefore(js, fjs);
}('A4827497'));