1.

Solve : Z-index/ordering elements Assistance?

Answer» HEY all,
I think I have a pretty simple problem, but I just can't seem to work around it. I'm trying to get text and an image to display ontop of a background image. I'm not repeating this background because of the design on the image, so I have it set off to the upper lefthand corner of the window, and set the BODY background to black so the image "bleeds" off.

My ISSUE is that no matter what I do, that background image is always "on top" of my content. May it be another image or text. I looked into using the z-index property through css but that still doesn't work. I'm sure there's some detail I'm missing, but I lack the know-how to FIND it. I appreciate any assistance I receive.

Here is my html code:




text




Here is my external stylesheet (It does infact link to the html file so thats not the issue):

.Logo
    {
    text-align:center;
    margin-top:50px;
    margin-bottom:0px;
    padding:0px;
    z-index: 2;
 }

#background_image {
   POSITION:absolute;
   left:0px;
   top:0px;
   z-index: 1;
}

.Text1 {color: #ffffff}


Make the bg's z-index 2 and the others z-index 1.


Discussion

No Comment Found

Related InterviewSolutions