CODEWITHSUNDEEP
htmlcssangular
Aw3same
Aw3same

Reputation: 1030

Overlay background image in ng-image-slider

I'm trying to apply a watermark(with an image) to an image inside a carousel. I replaced my previous ngx-bootrap/carousel by ng-image-slider. In my previous code, I use this and it works fine:

.watermarked:after {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0px;
  left: 0px;
  background-image: url("/assets/images/confidential.png");
  background-size: 300px 300px;
  background-repeat: space;
  opacity: 0.9;
}

Now, I find the container in the DOM and located the classs to override the css by my custom watermark css (is what the author recommends):

ng-image-slider .ng-image-fullscreen-view .custom-image-main img {
  content: '';
  display: block;
  background-image: url('/assets/images/confidential.png');
  background-size: 300px 300px;
  background-repeat: space;
  opacity: 0.9;
  border: 3px solid orange;
}

It 'works', because while the image is loading, I can see the background with my image, but after the load, it disappears..

While loading:

While loading

After the image load, the background get covered and I cannot see anything:

After load

Is this a normal behaviour? Is possible to maintain the background in the front line?

Thanks!

Upvotes: 0

Views: 771

Answers (1)

Niels Voogt
Niels Voogt

Reputation: 73

You forgot to use ::after in your example code. Add that to the container of the image since ::after doesn't work on img. I would suggest the following, but make sure that either .custom-image-main or another parent in your slider has position: relative; or the absolute positioning won't work.

.ng-image-slider .ng-image-fullscreen-view .custom-image-main::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background-image: url('/assets/images/confidential.png');

  ...etc
}

Upvotes: 1

Related Questions