CSS – Applying Transparency To Your Backgrounds

Filed under: CSS,Web Design

There are a variety of reasons that you may want to use Transparency in your designs and often you will find a png file set to transparent will meet your needs but you can also set transparency of your containers.

Unfortunately the CSS attribute of transparency is not cross browser compliant so you will need to add methods for IE and Firefox within the same selector.

Below you can see a range of transparency set on the background of a div that contains the number representing the transparency level of the div.
As you will notice this method is not perfect and unfortunately every thing within the container div will take on the transparency without the ability to override it locally on child containers.



10
30
50
70
90




To apply transparency you must include at least 2 property declarations.

filter:alpha(opacity=30); # this will cover IE
opacity: 0.3; # this will cover the rest

In other demonstrations we will cover the use of PNG image files for use as transparent backgrounds and also implement css transparency on images that have no transparency level set.

CSS transparency will work on any container with a background set and it will also work on images including JPEG images that do not allow transparency values.

When in doubt of your visitors browser level and ability always use conservative methods in your css declarations.

Never obscure your menus, links or other important features.