Home/ Questions/Q 7711657
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-01T01:25:51+00:00

I’ve got the following situation: <html> <head> <title> Title </title> <style type=text/css> #wrapper {

  • 0

I’ve got the following situation:

<html>
  <head>
    <title>
      Title
    </title>
    <style type="text/css">
      #wrapper {
        width: 100%;
      }

      #thingy {
        position: absolute;
        top: 20px;
        background-image: url("bg.png");
        width: 100%;
        height: 4px;
      }
    </style>
  </head>
  <body>
    <div id="wrapper">
      <img src="test.png" alt=""/>
      <div id="thingy">&nbsp;</div>
    </div>
  </body>
</html>

test.png is the same image, bg.png is a 1×4 background image.

The problem is: The element #thingy is displayed in front of the image, so a line goes right through the image. This should not happen, #thingy should be displayed behind the image. Playing with z-index doesn’t do anything…

Any hints?

Thanks,
Jost

EDIT: Some more details:
The goal is to get a header banner (test.png above), which has a horizontal line under it. The line must span the entire width of the header area (thus width: 100%), the banner must remain centered.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Declaring position: relative on the image and giving it a z-index corrects the behavior. See below:

    #thingy {
    position: absolute;
    top: 50px;
    background-image: url("bg.png");
    width: 100%;
    height: 4px;
    z-index: 1;
}

#wrapper img {
    position: relative;  
    z-index: 2500;
}
    • 0