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

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 -->





CSS Source Code



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;"




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 style="position: relative; z-index: 1000; margin: 0pt auto; width: 988px;">



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() {




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


Make sure that you have added jquery.js



Subin George
  • Jono_bonoo

    where i but jquery.js file ??

  •  You can download them at

    Or you can use  Jquery/Google CDN

    Please refer

  • – Oglasnik

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

  • m8ke

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

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

  • 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"

    • its is not advisable to add tags outside body.

      Make it as a first element in the body..

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

    • 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

  • Alex

    Is it possible to add Google ads?