Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

CSS Background-image over HTML img [duplicate]

Tags:

html

css

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;
    background-image:url('./images/image-mask-2.png');
    z-index:100;
}
like image 652
Mangled Avatar asked Sep 09 '13 14:09

Mangled


4 Answers

try to use padding instead of using width and height

#content img{
    height: 0;
    width: 0;
    padding: 35px 120px; // adjust that depend on your image size
    background-image: url('YOUR_IMAGE_PATH');
    background-repeat: no-repeat;
}
like image 125
Abdulrazak Alkl Avatar answered Nov 20 '22 03:11

Abdulrazak Alkl


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.

like image 26
Quentin Avatar answered Nov 20 '22 04:11

Quentin


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.

like image 36
Spudley Avatar answered Nov 20 '22 04:11

Spudley


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

like image 42
Loko Avatar answered Nov 20 '22 03:11

Loko