html - How to make watermark responsive? - Stack Overflow

admin管理员组

文章数量:1410681

I'm using this css to add a watermark to my images on my site, the problem is that when it fits on a phone screen the watermark logo looks bigger almost taking up the whole thumbnail I would really appreciate your support

.watermarked {
  position: relative;
}

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

<div class="watermarked">
  <img src=".jpeg" alt="Photo">
</div>

I'm using this css to add a watermark to my images on my site, the problem is that when it fits on a phone screen the watermark logo looks bigger almost taking up the whole thumbnail I would really appreciate your support

.watermarked {
  position: relative;
}

.watermarked:after {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0px;
  left: 0px;
  background-image: url("https://i.imgur/5GQA67n.png");
  background-size: 100px 100px;
  background-position: 30px 30px;
  background-repeat: no-repeat;
  opacity: 0.7;
}

<div class="watermarked">
  <img src="https://i.imgur/xDlSplX.jpeg" alt="Photo">
</div>

• html
• css
• responsive

Share Improve this question Follow edited Mar 11 at 9:16 Ori Drori 194k3232 gold badges238238 silver badges229229 bronze badges asked Mar 11 at 9:04 CovadolaCovadola 1344 bronze badges 1

• Try to change background-size to 20% auto; and also change background-position to 5% 5% – Coco Q. Commented Mar 11 at 9:16

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 1

The .watermarked element should fit the child image's width and height. Set the background-size and background-position using percent, so they would change according to the parent's size:

.watermarked {
  position: relative;
  width: fit-content;
  height: fit-content;
}

.watermarked:after {
  content: "";
  display: block;
  position: absolute;
  inset: 0;
  background-image: url("https://i.imgur/5GQA67n.png");
  background-size: 20%;
  background-position: 3% 3%;
  background-repeat: no-repeat;
  opacity: 0.7;
}

img {
  object-fit: cover;
}

.img1 {
  width: 100px;
  height: 100px;
}

.img2 {
  width: 300px;
  height: 300px;
}

<div class="watermarked">
  <img class="img1" src="https://i.imgur/xDlSplX.jpeg" alt="Photo">
</div>

<div class="watermarked">
  <img class="img2" src="https://i.imgur/xDlSplX.jpeg" alt="Photo">
</div>

<div class="watermarked">
  <img src="https://i.imgur/xDlSplX.jpeg" alt="Photo">
</div>

本文标签： htmlHow to make watermark responsiveStack Overflow