CODEWITHSUNDEEP
jqueryhtmlcssinternet-explorer-7
Brayden Williams
Brayden Williams

Reputation: 168

Displaying A Background Image Over An Overlay In CSS

I'm trying to display an image over top of an overlay in CSS. The image is also inside a wrapper.

The code works fine in IE 8, Firefox, and other newer browsers, and the image "shines" through successfully, however, in IE 7, the image stacks underneath the .overlay which is not how it is supposed to stack.

I have created a JSFiddle with my exact problem. The orange background is .wrapper, the image is an image tag inside of .image and .overlay is the transparent background.

The JSFiddle URL is: http://jsfiddle.net/7Lvus/

The way I'm "shining" the image through is by placing z-index:4 on .image

Anyone have any idea how I can make this work right in IE 7 (I'm testing on IE 8 compatibility mode)

Thank you

Upvotes: 1

Views: 619

Answers (1)

Marius T
Marius T

Reputation: 26

like this you mean: jsfidle

position the overlay inside the wrapper, or the link outside, IE7 doesn't seem to work with overlapping z-indexes from different levels of inheritance

Upvotes: 1

Related Questions