with Lorelle and Brent VanFossen

CSS Tips and Tricks – Backgrounds and Transparencies

We’ve done a lot of different CSS experiments, pushing CSS to its limits with fun and jazzy text, filters, horizontal and vertical flipping, and more, and now it’s time to tackle some fun with more filters.

Be sure and check out more of our CSS Experiments to help you expand your imagination with what is possible with CSS.

Background Transparency CSS Filter

In addition to shadow and drop shadow filters, another popular filter is the alpha transparency filter. Primily recognized by Microsoft Internet Explorer, more browsers are starting to recognize this filter. We used this effect in one of our demonstration layout pages. The alpha transparency filter creates semi-transparent content allowing the background to be visible through the transparency. For web page designers, this opens up a whole new range of artistic possibilities.

NOTE: More information on CSS transparency filters that work with Firefox can be found at Mandarian Design CSS Opacity Transparency Filters and CSS Opacity for Mozilla Firefox and Other Browsers.

The level of transparency (or opacity) is controlled by a fraction or percentage. The higher the number, the less transparency. For instance, 20% or 0.2 opacity would be very transparent and 80% or 0.8 would be almost solid.

The alpha transparency filter can be used on images, text and containers for a variety of design features. There are a few drawbacks, though. Everything within an alpha transparency filter container fades. For example, to the left is the fully opaque box with text in it and to the right is the same box with the 50% opacity alpha transparency filter applied. As you can see, not only has the box’s background faded, the text color has also faded.

At 100% opacity, this is the original box.
At 50% filtered opacity, this is the box
<div style=”display:block; width:150px; background:#000099; color:yellow; font-size:1.3em; padding:5px; filter:alpha(opacity=50); -moz-opacity:0.5; opacity:0.5; -khtml-opacity:.5“>At 50% filtered opacity, this is the box.</div>

When used against a backdrop, such as a colored background, you can see the transparency even more. Notice in the box to the right how the background is visible through the box and the text. Instead of yellow, the text is blending with the light blue background to make it green, changing the colors within the overlaying container.

At 100% opacity, this is the original box.
At 50% filtered opacity, this is the box
 
<div style=”display:block;
height:150px;
width:200px;
background:#00FFFF”>
<div style=”color:yellow;
height:100px;
width:150px;
background:#000099;
filter:alpha(opacity=50);
-moz-opacity:0.5;
opacity:0.5;
-khtml-opacity:0.5;
font-size:1.3em;
padding:5px”>
At 50% filtered opacity, this is the box
</div></div>

When used with an image in the background, the effect is mesmerizing.

30% opacity against the flower

Look closely at this example. The white box in which the text resides is partially transparent, allowing the flower photograph to be visible through the box. Unlike the above boxes where the text became transparent right along with the parent container, the text in this example isn’t transparent. It is solid and you can’t see the flower through the text.

There are several ways to achieve this effect. One is by layering of containers using the z-index. The z-index takes advantage of the power of CSS to not only create containers within containers on a linear basis, but also in 3 dimensions. The z-index works the CSS layers to determine what is in front or behind what container, adding depth to web page designs. Using absolute positioning, two containers, one with the transparency effect and the other with the content, can be positioned over each other using the z-index. Some of the links below describe this technique.

Unfortunately, using absolute positioning contrains a web page design to absolutes. The more absolute positions you use in your layout and design, the stricter your web page layout structure becomes and the more confined it is to one fixed width browser window, creating space at the sides of web pages viewed with high resolution screens.

Using a great technique by Ove A. Klykken, a Norwegian freelance web designer, we use the power of CSS’s relative positioning and hierarchy of parent-child, and a little creative use of CSS wildcards, we can create three containers with the following rules:

CSS Style Sheet:
/* Parent division with background image */
#backtrans {
float:left; width:161px; height:241px; padding:5px; background:url(blueeye1.jpg) no-repeat}

/* Transparent text area */
#transbox { width:130px;
margin-left:10px;
margin-top:25px;
background:#FFFFFF;
filter:alpha(opacity=50);
-moz-opacity:0.5;
opacity:0.5;
-khtml-opacity:0.5;
}

/* Asterick represents wildcard for child dependents of #transbox */
#transbox * {position: relative}

/* Text div – lacks transparency */
#transbox div {padding:10px;
color: #000;
font-weight:bold}

HTML Structure:

<div id=”backtrans”>
<div id=”transbox”>
<div>
30% opacity filter against the flower
</div>
</div>
</div>

However, this technique does not work in Firefox. I’ve poked and poked and so far have been unable to make it work. The filter works but it applies to all containers within the parent container. I’m still working on a solution, and have a bit of one found on one of our CSS test pages. View it both in Internet Explorer and Firefox to see the drastic differences as each browser interprets the CSS differently. View the source files and the CSS to see the differences in the code.

Alpha transparency filters are not all equal when it comes to various web browsers. To make sure you catch whatever browser is coming your way, you can set the alpha transparency filter to cover all the bases. If a browser doesn’t recognize the transparency filter, it will just ignore it and the containing box will become solid. Here are the differences for the different browsers for 30% opacity:

.filter {
filter:alpha (opacity=30); /* MS Internet Explorer */
filter:progid:DXImageTransform.Microsoft.Alpha
(style=0, opacity=30) /* MS Internet Explorer proprietory */
-moz-opacity: 0.3; /* Mozilla v1.6 and below */
opacity: 0.3; /* CSS-3 Standards */
-khtml-opacity:.3 /* Safari */
}

Alpha Transparency Filter – Links and Resources

16 Comments

  • Posted May 12, 2005 at 13:17 | Permalink

    Hi,

    I am trying this effect but it does not work in Firefox. The efect I am trying for is a black bg transparency with white writing on top. When you try to do that with your coding the same thing happens as with the experimenting I was trying: the white text in the text div comes out a faded white in Firefox. In IE there is no problem as long as using the position:relative trick.

    Any ideas on how to make the text full white?

    Patricia

  • Posted May 12, 2005 at 14:05 | Permalink

    As mentioned above, the trick is in creating a separate DIV for the text that doesn’t get the opacity filter on it.

    It took some doing to get these to work in Firefox, and they still don’t do what I want and what I got in MSIE. Just keep poking at it and copy the code directly and see if you can get that working first.

    I designed all of these experiments for MSIE and other browsers and am still revamping these to get Firefox to work with them. At least the opacity works. I’m still trying to figure out vertical and flipped text…oh, the struggle continues.

  • Posted May 14, 2005 at 9:53 | Permalink

    Like mentioned above the solid text over the faded stuff doesnt work in Firefox… try this link to see what I’m getting at in both IE and Firefox:

    http://goeshere.com/index_email.html

    Any solution?

  • Posted May 14, 2005 at 20:16 | Permalink

    The link you gave doesn’t work.

    Opacity works in Firefox, it just still opaques even the DIV that is sitting “above” and outside of the opacity filters. This technique works brilliantly in MSIE and all the other browsers, except Firefox. I’ve contacted the original designer of this overlay process to put solid colored text on top of an opacity filtered box on top of an image and I’m trying to fix this also on my end, but I’m having no luck, too. We’re still trying. Stay tuned.

    I adore Firefox, and sure wished a lot of the filters and special effects worked that I use on these test sites. They worked for Mozilla, and Firefox is a Mozilla product, so I’m trying to figure this out. Pity.

  • Posted May 15, 2005 at 4:13 | Permalink

    sorry its http://goeshere.com/index_test.html

    anyway look at in opera and netscape aswell, it doesnt like it very much apart from in IE.

  • Posted May 15, 2005 at 7:21 | Permalink

    Okay that new link I posted wont work either … but ive found an alternative method by creating the images and applying them as backgrounds, and using divs layered. It aint pretty by no means but it works exactly how I hoped in ALL browsers!

    http://goeshere.com/index_test2.html

  • Posted May 15, 2005 at 8:03 | Permalink

    The examples above include using images as backgrounds, so are you using z-index to adjust the levels? Can you share the codes or email them to me so I can test run them and possibly include these as examples?

    Looks great.

  • Posted May 16, 2005 at 15:10 | Permalink

    None of its done using z-index ;) its all just divs inside divs. You can look at the source and get the .css sheets if you wish and try to figure them out. But basically its a main background image with the curve on, and then a green recatngle and blue one placed on top using a few margins for the left alignment and spacer images to verticalyl align them properly.

    BTW: All the rounded corners are done using javascript I found on the internet.

    Its taken a long time figuring out all the mesaurements and such and creating the appropriate images and things, but the result works and in Opera, IE, Firefox and Netscape it should appear fine. Its not really a solution to the alpha problem more of a work around just for this situation, alhough a similar methos could likely be applied to other things its highly unlikely much of the code etc would be able to be used.

  • kelle
    Posted March 19, 2006 at 0:54 | Permalink

    how am i going to put transparencies during mouse overs?

  • Posted March 19, 2006 at 8:59 | Permalink

    The core area must be set in a link and the link’s hover state declaration in your style sheet should include the transparency information.

    a:hover {filter:alpha(opacity=50);
    -moz-opacity:0.5;
    opacity:0.5;
    -khtml-opacity:0.5;
    ...rest of your styles...
    }

    I haven't tried this, and it might not work on all browsers. Experiment with it and see what you get. And let me know.

  • Posted March 26, 2006 at 1:01 | Permalink

    Nice website. It would probably be helpful to add the source to the example that uses Z-indexes. I understand them and don’t need that link but I don’t know how it works in sync with opacity. I’m going to view the source of the whole page but for the sake of convenience to future visitors, this is my suggestion.

  • Posted March 26, 2006 at 8:07 | Permalink

    CSS2 – Visual Formatting Model – z-index
    CSS2 – Advanced Layout Module

    At the time this was written, the W3C specifications were unclear and my examples and explanation were better. The second link in the list is the new version that came out in 2005 and it shows a good example of how the z-index works.

  • Svenjick
    Posted May 30, 2006 at 6:14 | Permalink

    Hi,

    Sorry, but you example of non transparent text over trapsarent bg-color doesn’t work in Safari, nor Firefox 1.5.01 (WIN) & Firefox 1.5.03 (MAC). I believe that this is because transparency is applied to all elements within the first who has transparency… (at leat that is my understanding).

    Cheers anyways.

    Svenjick

  • Posted May 30, 2006 at 9:41 | Permalink

    Did you read the comments above explaining this issue?

    That might help.

    I’ve gotten transparency to work in Firefox (Windows) since 1.5 and it continues to work with the new version. You are right that the text within the container also hosts the transparency, but you can mess with it to get it to show up anyway. It’s tough because it is a feature not supported by most browsers, but it will work for MSIE and Firefox.

    If you come up with something better, please let me know so we can share it with everyone. You can see an example of this working in a test layout I did in 2003. Yet, I look at it again and the sidebar is rearranged in the latest version of Firefox. It is a test page, so it is tweaked a lot to get these effects to work way ahead of their time, pushing the limits.

    I’ll work on fixing the sidebar AGAIN in the next day or two. Still, the transparency effect is used as an example there, too.

  • Svenjick
    Posted May 30, 2006 at 10:36 | Permalink

    Sorry, I only cross-read the comments above.

    The only other solution I’ve come up with is to put the transparent element(s)/background(s) in a div which isn’t “above” the textual div. So it’s poor because it requires some fixed size constraints.

    If you wan’t to continue the original discussion, maybe better to discuss by e-mail (since I still can’t get the non-transparency of text of transparent elements to work in Firefox with your solution…) And please, don’t fix your solution just for me, I already have a way around it. Whatever, many thanks for you feedback, it was appreciated.

    Svenjick

  • Posted April 11, 2007 at 3:32 | Permalink

    Here’s my solution for modern browsers
    checked in IE 6, FF v.1.0.7, NN7 and Opera 8/9:
    /*———css begin———*/
    #container {
    filter:alpha(opacity=30);
    background-image: url(../images/30-proz.png);
    min-height: 300px; /*next lines are a hack to set a min-height, found on the web, NOT my work*/
    height: auto!important;
    height: 300px;
    }
    *html #container {
    background-image: url(../images/30-proz.gif);
    }
    /*———css end———*/
    Only set opacity for IE, use a 24bit PNG with transparency as background-image, then overwrite the PNG with the *hack to give the IE a GIF with “hard” transparency. I know that this is not helpy, if you like to use a transparency with a gradient in the transparency, but maybe this is helpy for some people.

Post a Comment

Your email is kept private. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>