Position Graphics on Top of Images using CSS

If you want to position a graphic or an image on top of another image this can be done using CSS and absolute positioning. This might be useful if you wanted to put a ‘sale’ or ‘new’ graphic on top of a product or new blog post. You can also use this for the positioning of logos and icons on top of images.

CSS positioning of icons on top of images

First, you need to create a containing div for your two images, then place the two images into the div. You also need to name the two images so that the necessary CSS can be applied. The example code below positions the top-image in the top left of the bottom-image.

<div class="containing-div">
   <img src="URL of your first image (bottom pic)" id="bottom-image">
   <img src="URL of your overlay graphic (top pic)" id="top-image"> 
</div>

#containing-div {
	position: relative;
}

#containing-div img#bottom-image {
	display: block;
}

#containing-div img#top-image {
	position: absolute;
	left:0;
	top: 0;
}