Home/ Questions/Q 8436197
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-10T07:07:03+00:00

On this webpage I’m developing the letters Sa and Flu are somehow both behind

  • 0

On this webpage I’m developing the letters “Sa” and “Flu” are somehow both behind and in front of an image.

The image isn’t fully on top – there’s no transparency in the image, so if it was then the text simply wouldn’t be visible.

However the image clearly isn’t underneath either.

What’s going on here?

Screenshot

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    The transparency comes from the #maincontainer which has opacity set to 0.92, which causes all of its content to be slightly transparent, unless your specify something else on the child-elements. 

    #maincontainer {
   margin: 0;
   padding-left: 14px;
   padding-right: 14px;
   padding-top: 10px;
   padding-bottom: 0px;
   text-align: justify;
   opacity: 0.92; /* Your transparency */
}

    Update:

    Setting z-index is not sufficient if the elements you want to position the element in relation to aren’t positioned. z-index only works on positioned elements (position:absolute, position:relative, or position:fixed). This is why the solution suggested by Truth, setting the header to position: relative; works. Now the image can be placed underneath the text using z-index.

    • 0