Search code examples
cssstylesstylesheet

Add an Image on top of another image

The UI of my page currently shows an Image in backgroud and text on left hand top corner of the page. Following is the code I am using for the image. 

<div>
    <div style= "z-index: 1; position: absolute; text-align: left; border: 1px solid black;">
        <img src="slide1.jpg" alt="alt text" style="height:220px;width:500px;border-width:0px;" />
    </div>
    <div id="curtain" style="z-index: 2; position: absolute; padding-left: 10px;">
        <div style="background-color: transparent; font-weight: bold; font-size: 1.8em; padding-top: 5px;">
            Profile
        </div>
        <div style="font-size: 1em; width: 215px; color: #cccccc;">
           He is a good citizen and a great teacher.
        </div>
    </div>
</div>

I want to add 2 small icons aligned vertically on the right hand side of this image.

Can someone help me with the css ?

Solution

  • Something like this?

    http://jsfiddle.net/7KTEQ/

    Just add <div id="smallImages"><img src='ONE' /> <img src='two' /></div> inside second div and css for it is:

       #smallImages {
    position:absolute;
    margin-left:400px;
}​

    change margin-left for css depending on second div width and image sizes..