z-index

[girl]

Hi people.I need help.When I use "z-index=-1" for writing text on image, image becomes shadowy.Why? What can I do???Thanks

[niche]

Compared to what? Please post your relevant code.

[thescientist]

that doesn't like any valid syntax for CSS or JS, so it's really hard to know at all what you're doing without any sort of provided context.

[girl]

Compare to what??? When I insert image without z-index. it looks normal, whne i add Z-index... becomes not so bright, shadowy. Code is very simple: in html file<img src="images/homapage.jpg" class="homeimage"> in css file .homeimage {width:920; height:420; position:absolute; top:10px; border-radius:30px; -moz-border-radius:30px;-webkit-border-radius:30px; z-index:-1;}

[ShadowMage]

What browser are you using? Does the same problem occur if you use a positive number or 0 for the z-index? I've heard that some browsers have issues with negative values. I'm not sure what sort of issues, but maybe this is one of them.

[girl]

No. it's only with negative.

[ShadowMage]

Then I'm guessing the problem is because your browser doesn't properly support negative values. You can just set the z-index of the image to 0 and set the z-index of the text to something higher.

Edited August 24, 2012 by ShadowMage

[pink squid]

Hope that helps, but maybe for future proofing. Quick way is to start your lowest layer say 10. Then increment z-index 10 units at a time. 10,20,30.... I also means you have flex to amend - say between 15 to slot between 10&20.

[justsomeguy]

A negative z-index is legal and allowed, and I don't think any browser since Netscape 4 has a problem with a negative z-index. The problem with using them is that you need to apply a z-index to every other element. If an element does not have a z-index defined then it is assumed to be 0, which means a negative z-index goes behind every element that has no z-index defined, possibly including the body itself. It sounds like you have some semi-transparent layer near the bottom of the stack that has no z-index defined and it's getting displayed over the image. "Not so bright, shadowy" sounds like you have a semi-transparent layer showing a shadow near the bottom of the stack.