Add "Watermark" Effect with CSS

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

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>

Creating watermark using html and css

#watermark
{
 position:fixed;
 bottom:5px;
 right:5px;
 opacity:0.5;
 z-index:99;
 color:white;
}

jSFiddle

Watermark text repeated diagonally css/html

Set the size of your container and float your text using absolute positioning while transforming your text with rotate.

#watermark {

  height: 450px;

  width: 600px;

  position: relative;

  overflow: hidden;

}

#watermark img {

  max-width: 100%;

}

#watermark p {

  position: absolute;

  top: 0;

  left: 0;

  color: #fff;

  font-size: 18px;

  pointer-events: none;

  -webkit-transform: rotate(-45deg);

  -moz-transform: rotate(-45deg);

}

<div id="watermark">

  <img src="http://www.topchinatravel.com/pic/city/dalian/attraction/people-square-1.jpg">

  <p>This is a watermark. This is a watermark. This is a watermark. This is a watermark. This is a watermark. This is a watermark. This is a watermark. This is a watermark. This is a watermark. This is a watermark. This is a watermark. This is a watermark. This is a watermark. This is a watermark. This is a watermark. This is a watermark. This is a watermark. This is a watermark. This is a watermark. This is a watermark. This is a watermark. This is a watermark. This is a watermark. This is a watermark. This is a watermark. This is a watermark. This is a watermark. This is a watermark. This is a watermark. This is a watermark. This is a watermark. This is a watermark. This is a watermark. This is a watermark. This is a watermark. This is a watermark. This is a watermark. This is a watermark. This is a watermark. This is a watermark. This is a watermark. This is a watermark. This is a watermark. This is a watermark. This is a watermark. This is a watermark. This is a watermark. This is a watermark. This is a watermark. This is a watermark. This is a watermark. This is a watermark. This is a watermark. This is a watermark.</p>

</div>

Watermark on table using CSS

<style>

table tr td:first-child { background: url("https://www.gravatar.com/avatar/21e3102a092c9848a19de0fd6f07b6ab?s=48&d=identicon&r=PG&f=1");}

</style>

<table class="example-table">

  <tr><td>First column</td><td>Second column</td><td>Third column</td></tr>

  <tr><td>First column</td><td>Second column</td><td>Third column</td></tr>

  <tr><td>First column</td><td>Second column</td><td>Third column</td></tr>

</table>

How to keep a watermark at the background of a web page?

This is another way. hope this helps

div{

    position: relative;

    z-index: 0;

    background: white;

    display: block;

    min-height: 40%;

    min-width: 100%;

    color: yellow;

    border: 2px solid black;

    height: 200px;

}

p{margin:0}

div:after{

    content: "DRAFT";

    color: steelblue;

    font-size: 120px;

    /* text-align: center; */

    position: absolute;

    top: 50%;

    left: 50%;

    transform: translate(-50%, -50%);

    opacity:0.1

}

<div >

</div>

---

Related Topics