[en-us] A simple solution for CSS transparency without hack

Within modern browsers, we feel free to add transparency on DIVs and other contents throught CSS3. For web designers, it increases de possibilities do compose more complex and refined layouts. We can control transparency with CSS properties like opacity.
However, some browsers still doesn't offer support for this feature and frequently we need to use some hack to make it work cross-browser.
There is a simple solution to treat this issue. It make the transparency works for browsers that support transparency and, for browser who doesn't, it still keel your layout elegant, even without transparency.

• Create a PNG transparent image with the desired opacity. The PNG can be 1px x 1px or, if it has some gradient effect, 1px width x correspondent height;
• On your CSS, add a rule like
  element { background: (images/bg_transparent.png) [repetition] [horizontal-position] [vertical-position]; }
  Ex.: .header { background: (images/bg_transparent.png) repeat-x 0 0; }

That's it! If the browser didn't suport the PNG transparency, you can still see your layout with background image. Have doubts if it really works? Check WWF website.
;)