How do I get an image to float on my website even when scrolling?

First you’ll want to put a DIV somewhere on your page and give it a class, for my example I’m going to call it floatingbanner.

So, our HTML will look like this:

 <div class="floatingbanner"> <!-- Banner Appears Here --> </div>

Then we drop in some CSS, setting the image as a centered background and give the div positioning properties so that it’s fixed at 0px from the bottom of the browser window:

.floatingbanner{
 background:transparent url(../images/floatingimage.png) no-repeat scroll top center;
 bottom:0;
 left:0px;
 position:fixed;
 width:100%;
 z-index:9999;
 height:80px;
}

Here’s what it looks like: