CODEWITHSUNDEEP
csspositionabsolute
Lukas Arvidsson
Lukas Arvidsson

Reputation: 467

Positioning images ontop each other in CSS and HTML

Have been trying to fix this problem I have here. Basically I have a website that has a background. Ontop of this background I have an centered image, lets call this image1. Exactly on top of image1 i want to draw image2. So basically I have a background which I want to draw two centered images ontop. I call them centeredImage and overlayImage.

Thank you for the help! Best regards, Lukas

here is my code so far:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<style type="text/css" media=screen>

body{
    background-color:#f1e6d0;
    background-image:url('backgroundPattern.jpg');
}  
.containerPage
{
    position:relative;
    display: block;
    width:1024;
    height:1515;
    margin-top:50px;
    margin-left:auto;
    margin-right:auto;      
}
.overlayImage1
{
    position:absolute;
    left:0px;
    top: 0px;
    z-index: 1;
}
.overlayImage2
{
    position:absolute;
    left:0px;
    top: 0px;
    z-index: 2;
}

 </style>

 <title>A dream within a dream</title>
 </head>
 <body>


<!-- PAGE BEGINS -->
<div class= "containerPage">

    <!-- BACKGROUND IMAGE -->
    <img class="overlayImage1" src="column.gif"  unselectable="on" height="1515" width="1024"/>
    <img class="overlayImage2" src="webSite_split_page1.gif" height="1515" width="1024"/>
    <!-- CONTENT BEGINS -->
    <!-- LEFT SIDE -->

</div>

</body>
</html>

Upvotes: 0

Views: 227

Answers (2)

mrtsherman
mrtsherman

Reputation: 39872

I see what you are after now. Try this. You will need to tweak the top value to get the correct vertical alignment.

http://jsfiddle.net/frV3D/

body{
    background-color:#f1e6d0;
    background-image:url('backgroundPattern.jpg');
}  
.containerPage
{
    position:relative;
    display: block;
    width:1024;
    margin-top:50px;
    margin-left:auto;
    margin-right:auto;

}

.centeredImage { display: block; margin: 0 auto; }

.overlayImage {
   position: absolute;
   top: 50%;
   left: 50%;
   width: 300px;
   height: 300px;
   margin-top: -150px; /* Half the height */
   margin-left: -150px; /* Half the width */
}

Upvotes: 1

kinakuta
kinakuta

Reputation: 9037

Give a position value to anything you want to provide a z-index to - in this case your .centeredImage.

Upvotes: 1

Related Questions