23

I have an image in a div. I need to add a watermark effect, or basically another image, overtop the image the div. How can I do this with css?

Example code:

<div id="image">
</div>

css:

#image {
   background:url(images/images.png) no-repeat;
}
2
  • 8
    "background" is called "background" because...
    – innaM
    Oct 26, 2009 at 16:17
  • 1
    Use z-index and write over the image.
    – Trick
    Oct 26, 2009 at 16:22

4 Answers 4

72

There are at least two ways to do this, one of which has sort of been touched-on by @erenon's answer.

To meet your requirements and use an image:

<div id="image">
    <img src="path/to/watermarking_image.png" alt="..." />
</div>

With the following CSS:

#image {
/* the image you want to 'watermark' */
height: 200px; /* or whatever, equal to the image you want 'watermarked' */
width: 200px; /* as above */
background-image: url(path/to/image/to/be/watermarked.png);
background-position: 0 0;
background-repeat: no-repeat;
position: relative;
}

#image img {
/* the actual 'watermark' */
position: absolute;
top: 0; /* or whatever */
left: 0; /* or whatever, position according to taste */
opacity: 0.5; /* Firefox, Chrome, Safari, Opera, IE >= 9 (preview) */
filter:alpha(opacity=50); /* for <= IE 8 */
}

#image {
  /* the image you want to 'watermark' */
  height: 200px;
  /* or whatever, equal to the image you want 'watermarked' */
  width: 200px;
  /* as above */
  background-image: url(https://www.davidrhysthomas.co.uk/linked/astrid_avatar.png);
  background-position: 0 0;
  background-repeat: no-repeat;
  position: relative;
}

#image img {
  /* the actual 'watermark' */
  position: absolute;
  top: 0;
  /* or whatever */
  left: 0;
  /* or whatever, position according to taste */
  opacity: 0.5;
  /* Firefox, Chrome, Safari, Opera, IE >= 9 (preview) */
  filter: alpha(opacity=50);
  /* for <= IE 8 */
}
<div id="image">
  <img src="https://www.davidrhysthomas.co.uk/linked/watermark.png" alt="..." />
</div>

This should generate something like the following:

   +--------------+--------------+
   |              |              |
   | 'watermark'  |              |
   |              |        __    |
   +--------------+       /  \   |
   |                     (    )  |
   |               /\     \  /   |
   |              /  \     ||    |   <-- Picture. Of...something. O_o
   | /\          /    \    ||    |
   |/  \________/      \_()||_()(|
   +-----------------------------+

The alternative way, assuming all you want to 'watermark' with is 'one word,' is to use words:

<div id="image">
    <p>Watermark text</p>
</div>

And the following CSS:

#image {
/* the image you want to 'watermark' */
height: 200px; /* or whatever, equal to the image you want 'watermarked' */
width: 200px; /* as above */
background-image: url(path/to/image/to/be/watermarked.png);
background-position: 0 0;
background-repeat: no-repeat;
position: relative;
}

#image p {
/* the actual 'watermark' */
position: absolute;
top: 0; /* or whatever */
left: 0; /* or whatever, position according to taste */
opacity: 0.5; /* Firefox, Chrome, Safari, Opera, IE >= 9 (preview) */
filter:alpha(opacity=50); /* for <= IE 8 */
}

#image {
  width: 200px;
  height: 200px;
  background-image: url(https://www.davidrhysthomas.co.uk/linked/astrid_avatar.png);
  background-position: 0 0;
  background-repeat: no-repeat;
  position: relative;
}

#image p {
  /* the actual 'watermark' */
  position: absolute;
  top: 0;
  /* or whatever */
  left: 0;
  /* or whatever, position according to taste */
  opacity: 0.5;
  /* Firefox, Chrome, Safari, Opera, IE >= 9 (preview) */
  filter: alpha(opacity=50);
  /* for <= IE 8 */
}
<div id="image">
  <p>Watermark text</p>
</div>

This should generate something like the following:

   +--------------+--------------+
   |              |              |
   |  watermark   |              |
   |    text      |        __    |
   +--------------+       /  \   |
   |                     (    )  |
   |               /\     \  /   |
   |              /  \     ||    |   <-- Picture. Of...something. O_o
   | /\          /    \    ||    |
   |/  \________/      \_()||_()(|
   +-----------------------------+

I realise that this question was probably answered to your satisfaction, but I hope this is of some use to you, even only as general information.

Updated to add an SVG option, though do bear in mind that in this example the 'watermark' text is selectable and the SVG element can be inspected to retrieve the image URL:

svg {
  width: 300px;
  height: 300px;
  border: 2px solid #000;
}
<svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  <style>
    /* adjusting the fill, colour and transparency,
       of the watermark text while the SVG is hovered */
    svg:hover .watermark {
      fill: #666f;
      font-size: 2.1em;
    }
    /* defining the default style of the watermark */
    .watermark {
      fill: #bbbb;
      font-size: 2em;
      font-family: Ubuntu, Calibri, sans-serif;
      font-weight: bold;
      transition: all 0.3s linear;
    }
  </style>
  <!-- the image that you want to be watermarked: -->
  <image xlink:href="http://www.davidrhysthomas.co.uk/linked/astrid_avatar.png" height="200px" width="200px" />
  <!-- the watermark text: -->
  <text x="50%" y="50%" dominant-baseline="middle" text-anchor="middle" class="watermark">watermark</text>
</svg>

0
7

Are you sure you want to do watermarking on client-side? Doing so basically defeats the whole purpose of having a watermark. What you'd want to do is to server an image which already contains a watermark. Do to so, you'll have to write server-side code.

2
  • 3
    it's not really a 'watermark', but an image that says a one word text.
    – Zach Smith
    Oct 26, 2009 at 16:25
  • I'm looking for the same thing - want to apply "watermark" to differentiate site logos for dev, test, prod, etc.
    – r00fus
    Apr 26, 2013 at 21:11
5

Your solution:

CSS:

#watermark{
   background:url(images/watermark.png) no-repeat; 
   width: 100px;
   height: 100px;
   position: relative;
   top: 0;
   left: 0;
}
#image{
   width: 100px;
   height: 100px;
   position: relative;
   top: 0;
   left: 0;
}

HTML:

<div>
<div id="image"><img src="..." /></div>
<div id="watermark"></div>
</div>

Far better solution:

Some people couldn't break through an overlay watermark, but some people can. It's highly recommended to use something server side watermarking, e.g: the imagemagick lib.

2
  • Agree - you're not so much as watermarking the image as you are faking it with CSS. You're better off using a server side technology to truly watermark it, whether you're doing it on the fly or just batch process a directory
    – Anjisan
    Oct 26, 2009 at 16:27
  • it's not really a 'watermark', but an image that says a one word text.
    – Zach Smith
    Oct 26, 2009 at 16:29
2

You could potentially use a transparent PNG to overlay two images, but you really do want to do this on the server since client-based solutions are easily defeated and don't really protect anything.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.