Home/ Questions/Q 8318981
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-08T22:09:51+00:00

I am trying to place my header <h1> over a div class named light

  • 0

I am trying to place my header <h1> over a div class named light which contains a background image named light.png. I have stacked them using Z-index and added position:relative, but still <h1> is not placed over <div class=light>.

What am I doing wrong? Here is my html code:

<body>
    <div class="light"></div>
    <h1>sdfdsf</h1>
</body>

css code:

body {
    background-image: url(images/bg.jpg);
    background-repeat: repeat;
    z-index:1;
}
.light {
    background-image: url(images/light.png);
    margin-left:auto;
    margin-right:auto;
    z-index:2;
    width:763px;
    height:566px;
    position:relative;
}
h1 {
    font-family: Georgia, "Times New Roman", Times, serif;
    font-size: 48px;
    color: rgba(255,255,255,1);
    position:relative;
    z-index:5;
}
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    All you have to do is to place your <h1> tag inside the <div> tag.

    <div class="light">
    <h1>sdfdsf</h1>
</div>

    Live example: Tinkerbin
    I modified your background color to show the example.

    You don’t need to use z-index for this.

    • 0