Home/ Questions/Q 7183579
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-28T18:00:42+00:00

Have been trying to fix this problem I have here. Basically I have a

  • 0

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>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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 */
}
    • 0