Overlay background image in ng-image-slider - html

Question

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:
After the image load, the background get covered and I cannot see anything:
Is this a normal behaviour? Is possible to maintain the background in the front line?
Thanks!

Answer 1

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
}