how to: watermark behind all elements

Question

Is there a way to make a watermark that's in the middle of a page show up behind clickable buttons?

.watermark {
    position: absolute;
    opacity: 0.25;
    font-size: 3em;
    width: 100%;
    text-align: center;
    z-index: 1000;
}

You may need to resize your browser to get the button to be right on top of the watermark to see that the button won't be clickable when overlapping the watermark.

So is the problem that the watermark blocks the button and you'd like it not to? — itamar, Mar 20 '17 at 12:51
Possible duplicate of [Click through a DIV to underlying elements](http://stackoverflow.com/questions/3680429/click-through-a-div-to-underlying-elements) — rlemon, Mar 20 '17 at 12:52
yes, I'd like the watermark to truly be in the background of everything if possible — Rod, Mar 20 '17 at 12:52
If you really want it in the background, you could set a background image on your page. But then the watermark will be obscured by text, buttons, et cetera. Is that what you want? — Just a student, Mar 20 '17 at 12:55

score 1 · Accepted Answer · answered Mar 20 '17 at 12:52

Do pointer-events:none on the watermark.

This tells the browser not to perform any click events on that element - and it will instead hit the button.

Here is the updated fiddle

p {
    background-color: #6cc;
}

body {
    background-color: #ccc;
}

.watermark {
    position: absolute;
    opacity: 0.25;
    font-size: 3em;
    width: 100%;
    text-align: center;
    z-index: 1000;
    pointer-events:none;
}

score 1 · Answer 2 · answered Mar 20 '17 at 13:04

Try to do it by following this approach, as you see it's correctly working ^^

.container {
  display: table;
}

.watermark {
  position: absolute;
  z-index: -1;
  font-size: 100px;
  color: blue;
}

<div class="container">
<div class="watermark">Watermark</div>
<label>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</label>
<button type="button">Click me, you can!</button>
</div>

how to: watermark behind all elements

2 Answers2