10

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?

Dennis Martinez
  • 6,344
  • 11
  • 50
  • 67
  • i think...if you set a image as background.you can't increase z-index.why don't you use two tag – Anish May 16 '11 at 15:19
  • please an example of the code you talk about –  May 16 '11 at 15:19
  • @Anish - he means an element with background that contains and inside. It can be done and it is valid just make sure you don't put it behind the tag. – easwee May 16 '11 at 15:20

4 Answers4

24

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>
DanielB
  • 19,910
  • 2
  • 44
  • 50
1

It works if you set position to either relative or absolute. Be sure to set it as it may just be inherited.

antk3
  • 15
  • 2
0

use 2 divs with a background image or the divs and set each div / image the z-index

0

Would be useful if you could show some code to understand what you want to do. If you only want to display an image in front of another, use 2 Containers like Div, or Span..

<div id="image1">
    <span id="image2"></span>
</div>
DevZarak
  • 269
  • 1
  • 5
  • 20