The site I'm working on has three layers (from the bottom): a tiled background image, a simple top-to-bottom gradient, and the actual content window on top. I am trying to change the opacity of the gradient itself so that it will give the background a faded appearance as well as some color.

However, whenever I try to add opacity to the gradient div (opacity: 0.4;), for some reason it yanks the tiled-image background layer to the front (covering everything) and makes the "background" only slightly transparent.

How do I get the gradient to become transparent without this happening?


It's hard to answer without knowing what browser you're experiencing the problems in, the code you talk about isn't cross browser compliant.

Best way to achieve a cross browser gradient, outside of using html 5, is to use a transparent 24-bit png.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.