Posted by: Peter Andrease

Posted on: February 22, 2011 10:01 am


This tutorial will show how to make an image float in the corner of a website, for instance, to highlight a feature or button, like that shown below.

First create your corner image and it’s best to create the image as a transparent png so that it can float on top of the page on a low res screen without looking odd (unless it is a solid image anyway).

Now open your css file and you will need the following css for your image.

#float-image {
position: absolute;
top: 0;
right: 0;
width: 114px;
height: 118px;
background: url(images/misc/image-name.png) no-repeat;
display: block;

This code will make whatever you set as id=float-image to be position absolute on the page to the top right corner, you may also need a z-index of say 100 encase the image floats below any other divs.

If you want the image to constantly be fixed at the top right corner even when scrolling then simply change position: absolute to position: fixed.