Webmasters Stack Exchange is a question and answer site for pro webmasters. Join them; it only takes a minute:

Sign up
Here's how it works:
  1. Anybody can ask a question
  2. Anybody can answer
  3. The best answers are voted up and rise to the top

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?

share|improve this question

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.

share|improve this answer

Your Answer


By posting your answer, you agree to the privacy policy and terms of service.

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