CODEWITHSUNDEEP
csspositioningtransparencyz-index
8128
8128

Reputation: 999

Image is transparently overlapping text

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

Upvotes: 1

Views: 176

Answers (3)

Madara's Ghost
Madara's Ghost

Reputation: 174977

Adding position: relative on the header div seems to solve the issue, that's because z-index doesn't work on elements which are statically positioned (default, no position value), as explained further on Christofer's answer.

The transparency propagates from a higher container, (in this case #maincontainer).

Upvotes: 3

Christofer Eliasson
Christofer Eliasson

Reputation: 33865

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.

Upvotes: 2

Py.
Py.

Reputation: 3599

There is transparency because you've set an opacity on the picture.

Removing the opacity here : 

#maincontainer {
    opacity: 0.92; /*< remove this line*/
    text-align: justify;
}

Resolves the problem.

Upvotes: 2

Related Questions