How to overlay an image/watermark with pure CSS and HTML

Question

Is there an easy way with relative positioning to overlay a transparent PNG (or any other image) over an image tag with CSS just by passing a class?

 <img class="watermarked" src="http://placehold.it/500x325.jpg" alt="Photo">

Then the CSS might be similar to this (not working):

.watermarked{
  background-image: url("http://placehold.it/100x100/09f/fff.png");
  position: relative;
  left: 30px;
  opacity: 0.5;
}

Ideally, I would be able to define the path of my "watermark" overlay image within CSS and then any image that I add "watermarked" class to would get this image overlaid on top with some negative relative positioning. It should be able to be applied to multiple images on a single page, so a single use DIV will not work.

Obviously, this does NOT do anything to protect the underlying image...so to call it a watermark is not really accurate...more of a temporary overlay. I am amazed that an answer is not readily available but I have poked around and not found an answer here or on google.

.watermarked {
  background-image: url("http://via.placeholder.com/100x100/09f/fff.png");
  position: relative;
  left: 30px;
  opacity: 0.5;
}

<div class="col-lg-3 col-md-6 mb-4">
  <div class="card">
    <img class="card-img-top watermarked" src="http://placehold.it/500x325" alt="">
    <div class="card-body">
      <h4 class="card-title">Card title</h4>
      <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sapiente esse necessitatibus neque.</p>
    </div>
  </div>
</div>

Brett DeWoody · Accepted Answer · 2018-01-21T10:36:32.547

If you're going for a CSS-only solution, I'd recommend wrapping the image you want to watermark in a container div, which we can then add an :after pseudo-element containing our watermark.

The ideal solution would be to apply the :after pseudo-element directly to the img element, but unfortunately most browsers don't support using :before or :after on img elements. If so we could have applied the .watermark directly to the img tag.

In the solution below we're overlaying an :after pseudo-element over the entire image, then placing the watermark logo in the top-left corner.

One advantage this solution has is the :after element covers the entire image, which prevents users from right-clicking and saving the image (though this doesn't prevent anyone with a bit of web experience from finding the image URL to download it). Because the :after element covers the entire image we could also apply a semi-transparent background to slightly obscure the watermarked image.

So we're left with this solution:

.watermarked {
  position: relative;
}

.watermarked:after {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0px;
  left: 0px;
  background-image: url("http://placehold.it/100x100/09f/fff.png");
  background-size: 100px 100px;
  background-position: 30px 30px;
  background-repeat: no-repeat;
  opacity: 0.7;
}

<div class="watermarked">
  <img src="http://placehold.it/500x325.jpg" alt="Photo">
</div>

It is not displayed while you select print "save as pdf". Any solution? @Brett — chirag p, Aug 08 '23 at 11:18

score 0 · Answer 2 · answered Jan 21 '18 at 11:55

Another way is to create a relative div and put it in the flow of the page, placing the main image first and then place the watermark on top.

<!Doctype>
<html>
<head>
    <style>
    .card
    {
        position: relative;
        top: 0;
        left: 0;
    }
    .watermark
    {
        position: absolute;
        top: 60px;
        left: 80px;
    }
    </style>
</head>
<body>
    <div style="position: relative; left: 0; top: 0;">
        <img src="img/cardX.png" class="card"/>
        <img src="img/watermark2.png" class="watermark"/>
    </div>
</body>
</html>

Or you could overlay your image with watermark text. This can easily be done with HTML or CSS.

HTML:

<figure class="watermark">
<img class="demo" src="image.jpg" alt="Image" />
<figcaption class="watermark-text">Watermark XYZ</figcaption>
</figure>

The CSS code is longer, as you need to define the class, etc and use the :after element as Brett described above.

.watermark {
position: relative;
padding: 0;
margin: 0;
}
.watermark img {
display: block;
max-width: 100%;
height: auto;
}
.watermark:after {
content: "";
position: absolute;
display: block;
left: 0;
top: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0) linear-gradient(to bottom, rgba(0, 0, 0, 0) 0px, rgba(0, 0, 0, 0.6) 70%) repeat 0 0;
z-index: 1;
}
.watermark-text {
display: block;
position: absolute;
width: 100%;
color: #fff;
left: 0;
bottom: 0;
padding: 1em;
font-weight: 700;
z-index: 2;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}

Thanks. The issue here is that I then have to include the watermark image tag for every image...so that would end up with a lot of extra clutter in the HTML. Really hoping CSS can do it with a single "watermark" image reference that just gets re-used multiple times. — techtheatre, Jan 21 '18 at 23:40

score 0 · Answer 3 · answered Jul 23 '21 at 05:46

Use the actual image as a background-image then reuse the watermark in an tag infinitely. This makes it harder to Save As the background-image behind the watermark but also prevents crawlers from indexing the image. If you still want watermarked photos to be crawled you can simply list their URLs in a .txt file and submit it as a sitemap.

How to overlay an image/watermark with pure CSS and HTML

3 Answers3

Linked