Menu
I have a css background image that I want in front of my img tag. The css background image has a z-index of 1, and the img tag has a z-index of 0. Am I allowed to put an img tag behind the css background with the z-index or will a css background always be behind an img tag regardless of it's z-index?
963
No, z-index cannot be applied to a background image.
Add CSS. Add a relative div placed in the flow of the page. Set the background image as relative so as the div knows how big it must be. Set the overlay as absolute, which will be relative to the upper-left edge of the first image.
CSS Code: The CSS property is used to set the image as background in the text. The background-image property is used to set an image as background. The -webkit-text-fill-color property is used to give the text a transparent color, the background image will show through the text, thus completing the clipping effect.
The most common & simple way to add background image is using the background image attribute inside the <body> tag. The background attribute which we specified in the <body> tag is not supported in HTML5. Using CSS properties, we can also add background image in a webpage.
Sure, a HTML element with a background-image and a higher z-index can overlay any other HTML element, in your case a simple <img /> tag. But the <img> tag has not to be nested within the tag holding the background image.
This will work
<img src="../image.jpg" />
<div style="background: url(../image2.gif); z-index: 1">Content</div>
this not:
<div style="background: url(../image2.gif); z-index: 1">
<img src="../imag.jpg" />
</div>
It works if you set position to either relative or absolute. Be sure to set it as it may just be inherited.
28
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
