Search code examples
cssz-indexwatermark

Z-index to place watermark above image but under text is not working

I would like my text watermark to be visible above images but under the page text so that the page text remains readable.

I have tried various combinations but to no avail. For example, I do not understand why setting the watermark to z-index = -1 puts it under the text but when I set the image to z-index = -2 (or -100) it does not display what I want.

I also tried setting the watermark to z-index=1 which displays above the image and then setting [p] z-index=100 it does not put the text above the watermark.

Assuming that the text may be best left at default (no setting to assume 0) then by setting z-index = -1 for watermark and z-index = -2 for the image, in theory it should display as desired.

But that theory does not work.

(fixed positioning is not used)

Solution

  • z-index only works when position property is specified. You may have "position" already defined for the watermark but you need to also specify "position" for the text. For example:

    p {
position: relative;
z-index: 10;
}

    Or if there is no "p" tag specify a position for the image. By setting the watermark to z-index="-1" it will go under the text. Then set position for the image:

    img {
position: relative;
z-index: -2;
}