Watermark Background Images in Div

Make the image inside a div appear behind its div background

By giving .artist-container a higher z-index, you are placing it higher in the stacking order than the child image, though children always have a higher z-index than their parents.

If you want to give the effect of a watermark, you can:

1. Make the image the background of the div and place an image watermark inside it.

2. Position another div within .artist-container absolutely, with the same dimensions as that of the image and with a higher z-index of the image, with the watermark as the background.

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>

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>

How to Layout a Watermark Image that is transparent along with a banner image and content div?

This is my suggestion:

Give your body and html a width of 100%.
Make a new Div that would be called something like watermark container and give it a width of 100% with position absolute.
Inside that div, make another called watermark and give it a position absolute, but then you can give it a left:50% and then a negative left-margin to place it in the exact point you want it.

This will ensure that the watermark is always placed in the right spot regardless of the screen size.

Here's the code:

body, html {
    width:100%;
}

#watermarkCont {
    width:100%;
    height:100%; //or if you want to just make this a px amount, it might not take 100% height
    position:absolute;
    top:0;
} 

#watermark {
    background-image:url("/*image*/");
    width: /*whatever the image width is*/;
    height: /*whatever the image height is*/;
    position:absolute;
    left:50%;
    margin-left:-200px;
}

This approach is usually used for centering absolutely positioned elements. The negative left margin is usually half of the width of the element, but in this case, you will be pushing to the left more, so make it a bigger negative number if needed.

After you have it placed, give each element the correct z-index and your large watermark should be able to fit in place without having to be cut up.

How to displaye watermark background image in every section on onepage site

You can use the CSS property position: fixed as so:

.watermark:after{
    position: fixed;
}

How can I change the background image opacity without affecting the background color?

Use an rgba color value and remove the opacity. For a white overlay you may use background:rgba(255,255,255, 0.5); while the last value (in this case 0.5) defines your transparency.

You can check this fiddle.

---

Related Topics