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

by Subin George on March 19, 2012 in CSS, General, HTML, Javascript, PHP, Programming with 10 Comments
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
Tagged: , , ,
  • 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?

←
→