How to create background image Ads using pure HTML and CSS? A better, quick and smart way

File-Adobe-Dreamweaver-CSS-01-icon[1]

Now a days “background image Ads” are becoming one of the common revenue making concepts in internet industry. But most of us, still unaware, how can make can we implement it. Technically there are too many ways to do it, including few jQuery solutions. But after experiencing with most of this I realized that HTML/CSS version is better and efficient in many aspects.

Some of the advantages are

  • CSS/HTML version is much quicker and easier.
  • Easy to understand.
  • As we are calling image as background image it won’t hurt the page loading time, even though image size is bigger for low band width users.
  • No script loading delay.

HTML Source Code

Steps to accomplish

  • Make sure that no background image for <body> tag. If so replace it with an inner <div> style.
  • Add a wrapper <div> to all content of <body> tag.
  • Append image ad div to <body> tag. i.e. add before the content wrapper div.
  • Now add below css classes to style sheet or add as inline or as embed.
  • Save and see the magic.
<div class ="ad-banner-image" >

<!-- EMPTY DIV -->

</div>

<div>

MAIN CONTENT BLOCk

</div>

CSS Source Code

.ad-banner-image

{

position: absolute;

display: block;

left: 0pt;

z-index: 1;

width: 100%;

height: 1252px;

background: url('{IMAGE_FOR BACK_GROUND_IMAGE_PATH}') no-repeat scroll center top transparent; top: 0pt; cursor: pointer;"

}

.main-content-block

{

position: relative;

z-index: 1000;

margin: 0pt auto;

width: 988px;

}

Inline version

<div style="position: absolute; display: block; left: 0pt; z-index: 1; width: 100%; height: 1252px; background: url('IMAGE_FOR BACK_GROUND_IMAGE_PATH') no-repeat scroll center top transparent; top: 0pt; cursor:pointer;">

</div>

<div style="position: relative; z-index: 1000; margin: 0pt auto; width: 988px;">

MAIN CONTENT BLOCk

</div>

How to make the Background image clickable?

To accomplish this, you may get solutions like adding <a> around <div>. But it won’t be a good practice as per standard. Finally you may end up with replacing <div> with <IMG>.  But you will never get the desired output.

But my solution is quite simple. Make it clickable with JavaScript.

Simple Jquery Solution is

$(document).ready(function() {

$("div.js-ad-home-page-background").click(function(event){

window.open('LINK_TO_ADVERTISE');

});

});

Common Issues

Ad links will won’t work if there is no JavaScript(which is not at all happen now days) and if any JS error in page. Which are common. So make sure that no script error before this jQuery snippet

Note:

Make sure that you have added jquery.js

 

 

Subin George
  • Jono_bonoo

    where i but jquery.js file ??

  • http://subin.me/ Subin George

     You can download them at http://jquery.com/

    Or you can use  Jquery/Google CDN

    Please refer

    http://jquery.com/download/

  • SiSO.si – Oglasnik

    Thanks very much, I was looking for this kind of solution!

    • http://subin.me/ Subin George

      Thanks

  • m8ke

    Hi, thx for the tip !!
    Everything works fine…… except the fact that when i click on the ad, nothing happen… Please help !

    • http://subin.me/ Subin George

      Which browser are you using?

  • http://twitter.com/Creativefolknet Creativefolks.net

    can you show , what happnes if I have mor ethen 3 images?

    • http://subin.me/ Subin George

      You mean you have three ad image?

  • chemistrap

    Hi ,
    Thnx for sharing this important info but i have different issue .

    I got a background ad ( a script ad ) . They say this cod must be before /body tag but i have just this code ” <body id="top" >

    ” in header.php

    ps : i have using Sahifa theme.

    • chemistrap

      <body id="top"

    • http://subin.me/ Subin George

      its is not advisable to add tags outside body.

      Make it as a first element in the body..

  • http://www.sentuamsg.com/ SentUAMessage

    whilst it kind of worked it made the image infront of the layout instead of behind the layout

    • http://subin.me/ Subin George

      Dude, did u update the z-index values?

      z-index will allow us to order the layers in the page, if they are overlapping.

      Hope this will helps, Thanks