Overlay Images using CSS

By | April 8, 2010

I want to introduce a section called quick tip as I have a lot that I can share which I encounter on a day to day basis.  The first  one that I will share is overlaid image using CSS.

Here it is there are 2 parts 1 is the CSS and 1 is the HTML where you apply ths CSS


CSS Code:

#OverlayImage1
{
	positionabsolute;
	left20px;
	top20px;
	width56px;
	height45px;
	backgroundurl(Angel.png) no-repeat top left;
	opacity.80;
	filteralpha(opacity=80);
	-moz-opacity0.8;
}

#OverlayImage2
{
	positionabsolute;
	left40px;
	top20px;
	width56px;
	height45px;
	backgroundurl(Devil.png) no-repeat top left;
	opacity.80;
	filteralpha(opacity=80);
	-moz-opacity0.8;
}

HTML Code:

<div id="OverlayImage1"></div>
<div id="OverlayImage2"></div>

In my example I have 2 images one is the devil and one is the angel and we want to place them together in an overlapping manner like this below

Overlaid

Originally they are two separate images and here is it as a reference

Angel

Devil


3 thoughts on “Overlay Images using CSS

  1. Pingback: CSS. Наложение изображений -Коллективный блог VR-Online

  2. Dr. Macenstein

    Hi there,
    I’m trying to place an image with a link OUTSIDE the main area of my page and was hoping I could somehow use this tutorial to do it, but I apparently am not proficient enough yet at WordPress to do so.

    . In general, what I want to do is add a giant background image BEHIND my post, and then have a clickable area on either side of the page so that I can have advertising behind the page.

    Do you know if there’s a way to place a sort of invisible clickable image map with absolute coordinates?

    here’s the test site
    http://boomba.com/macensteintest/
    I want to make the sides of the background image clickable, if possible

    thanks!

    – The Doc

    Reply
  3. rsmacaalay

    You can easily do it by

    devil.png holds the Href but it OverlayImage2 overlaps it will loose the link on the overlapped coodrinates

    Reply

Leave a Reply