Css Background-image Over Html Img

I was wondering whether it's possible to get background-image to be on top of all html img's in a certain div (like a sort of mask) I tried: #content img{ position:relative;

Solution 1:

try to use padding instead of using width and height

#contentimg{
    height: 0;
    width: 0;
    padding: 35px120px; // adjust that depend on your image size
    background-image: url('YOUR_IMAGE_PATH');
    background-repeat: no-repeat;
}

Solution 2:

For a background image to cover another image, it must be a background on an element that covers said image (e.g. one that is absolutely positioned).

An element's own background cannot appear above its content.

Solution 3:

No, the image defined in the <img src=''> is the foreground content of the element.

The background-image is the background of the element. It is shown behind any content.

The clue is in the name.

The only way you can get a background image to appear on top of the foreground content is for it to be the background of a separate element that is positioned on top of the main element.

You can do this without additional HTML markup by making use of the CSS ::before pseudo-selector. This adds a CSS-controlled element to the page next to your main element in the DOM. This can then be styled with z-index and positioning, so that is is on top of the main element. Then its background-image will appear on top of the main image from the original element.

However, ::before is not supported on img tags in all browsers, so this technique is not recommended.

Solution 4:

Just use a div to place a background on another background? Give the body a background and your div?

Solution 5:

Its bad practice to do that for background images, you will end up with alot of dirty code. And I thing its unnecessary, cause the reason you put an image as a background you want it to be the first layer on the z-index (that is the whole concept behind background-image:url('./images/image-mask-2.png');)