CSS background transparency without affecting child elements, through RGBa and filters

Looking at the design of most web pages today, almost exclusively all of them include some semi-transparency of elements. However, getting the desired effect in CSS is harder than one might think.

The problem

If we want an element to have a semi-transparent background, and let whatever is behind it shine through, we have two options:

  • Using CSS and opacity
  • Creating a 24-bit PNG background image

The problem with using opacity in CSS, besides the annoying syntax to cater to all web browsers, is that not only the background of the element will have transparency, but all of its child elements as well. This means that any text within will have the same opacity, which I would dare to venture is very seldom the result one wants. You can cater to this problem with creating redundant elements, some tricky CSS positioning and such, but really, it’s a mess.

The problem with PNG images is, beside a superfluous HTTP request, that images are way, way more larger in file size than one or two lines of CSS code – especially considering that the image has to be a bit larger to avoid serious memory leak issues with 24-bit PNG images with alpha transparency in Internet Explorer.

The solution!

Therefore, I can happily offer an alternative for you: RGBa colors. The beauty in this is that you declare the normal RGB values + values for the level of transparency you want, resulting in a very easy way to declare transparency for a color. Making this happen with CSS, with a fallback for those web browsers that doesn’t support it, would look like this:

	.alpha60 {
		/* Fallback for web browsers that doesn't support RGBa */
		background: rgb(0, 0, 0);
		/* RGBa with 0.6 opacity */
		background: rgba(0, 0, 0, 0.6);
	}

The transparency will only be applied to the background – fantastic, isn’t it?! πŸ™‚

A little caveat

Shockingly enough (erm), no version of Internet Explorer supports RGBa colors (i.e. not IE 6, IE 7 or IE 8 at the time of this writing). However, and lucky for us, in year 2000 Microsoft went crazy with implementing various filters in IE. One of them are the gradient filter, and what we can do is use that and just define the same start and end color. “Ok, but how do I get the transparency”, you might be thinking now. The answer to that is that you will declare that as part of the color hex value. A CSS gradient filter achieving the same effect as the CSS code above would look like this:

	.alpha60 {
		filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000);
	}

As you can see, it is actually declared as part of an 8-digit hex value, where the first two numbers is the alpha hex value, the next two is Red, and so on. The difference between how we do it with RGBa is that the hex value will range from 0 to 255, just as any color value. So, how do we convert an alpha level of 0.6 to its hex value?

This where a little Math comes in the picture. Basically, we take our desired alpha level, 0.6, and multiplies it with 255 – then we convert that result into hex. One very easy way to do this is make use of Google’s Search Features, and just search google for 0.6 * 255 in hex. Unfortunately, though, Google’s calculator seems to only handle integers, hence 0.3 * 255 in hex won’t give you a result.

An alternative, or quicker way altogether, is to use the beauty of JavaScript. Just open up Firebug and type this into the console:

	// Replace 0.6 with your desired alpha level
	Math.floor(0.6 * 255).toString(16);

99 is then corresponding to 0.6, and becomes the first two digits of the start and end colors for the gradient filter.

Combining it all

With all techniques learned above, let’s put it together in a working CSS rule:

	.alpha60 {
		/* Fallback for web browsers that doesn't support RGBa */
		background: rgb(0, 0, 0);
		/* RGBa with 0.6 opacity */
		background: rgba(0, 0, 0, 0.6);
		/* For IE 5.5 - 7*/
		filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000);
		/* For IE 8*/
		-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000)";
	}

NOTE! In addition to this, you have to declare background: transparent for IE web browsers, preferably served via conditional comments or similar!

Web browser support

RGBa support is available in:

  • Firefox 3+
  • Safari 2+
  • Opera 10

Filters in Internet Explorer are available since Internet Explorer 5.5.

This means that this will work for virtually everyone!

Acknowledgements

Thanks to RGBa Browser Support and Bulletproof, cross-browser RGBA backgrounds, today for the information and inspiration.

Thanks to Emil StenstrΓΆm and Pelle Wessman for coming up with countless alternatives for hex conversion, and explaining basic math to stupid me. πŸ™‚

192 Comments

  • Ah, so that's where those hex codes went. πŸ™‚ I figured you had something like this going on. Great idea and well done. I will surely use this quite soon.

  • Florent V. says:

    In my tests, the opaque background fallback doesn't work in IE6 and IE7. Probably not in IE8 either, but i didn't check.

    By the way, did you test this solution for know issues with DirectX filters? Like necessity to have hasLayout=1, text that doesn't render like the rest of the page's text, and more?

  • Great article Robert. Will surely come to use in some of my coming projects. I'm sick an tired of having to use Photoshop when switching background colors of my site.

    And thanks for the link, I did nothing πŸ™‚

  • Great post!

    Another crappy thing about IE is that if you set opacity or a gradient by setting this gradient-filter on a table-cellbackground for instance. The text you put inside this element will be rendered badly. You will see the difference if you use a gradient with the same color from start to end and put at text above it. If you do the same thing with just a plain background-color and no filter the text will render much more smoothly with antialias.

    I guess PNG is the safest alternative. But most boring and tedious…

    /gun-R

  • Robert Nyman says:

    Gustaf,

    Yes, that explains my new-found hex fetish, right? πŸ™‚

    Florent,

    Thanks for pointing that out! For IE, through conditional comments or similar, the background has to be set to transparent (I have updated the blog post).

    In Lea's blog post, she lists a number of possible shortcomings. And yes, having layout is necessary, there are some text problems (varying on context) etc.

    At the end of the day, though, I think it's about mindset: as with any CSS in IE, you could either see it as a possibility (with some kinks to work out), or as a potential problem.

    Emil,

    Exactly, I think this can become really useful!

    Gunnar,

    Thanks!

    Absolutely, there are some drawbacks when it comes to rendering, with various results. I guess it's all about weighing pros and cons together; the text might not be identical, but it will perhaps be good enough.

  • Great post Robert!

    One thing to keep in mind for this approach, is that rendering in IE slows down to a crawl (if that's even possible) when you're using filters.

    Depending on your context, you might be killing your client-side performance if you start using filters. On the other hand, if your page is relatively simple, then this technique might just be the ticket!

    Knowing when to use which technique for IE seems to be key for success these days.

  • Robert Nyman says:

    Morgan,

    Thanks!

    And yes, filters might have that effect in IE, but not all the time – it's all about testing in the applicable context.

    And yes, IE testing and experience is definitely key. πŸ™‚

  • […] CSS background transparency without affecting child elements, through RGBa and filters […]

  • Paul says:

    Works perfick! Had previously thought that IE visitors would be stuck with a less pretty version. Thanks, (now to get those rounded corners working….)

  • Robert Nyman says:

    Paul,

    Yes, the rounded corners are a little bit more tricky…

  • biziclop says:

    I use this variaton, which fits into one declaration block:

    <code>

    .transparentoid {

    background: #FF8040; /* solid color */

    background: rgba(255,128,64,0.125); /* transparent color */

    background: transparent !ie; /* clear solid background for ie */

    zoom:1; /* required for the filters */

    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#20FF8040, endColorstr=#20FF8040); /* IE5.5-7 */

    -ms-filter:"progid:DXImageTransform.Microsoft.gradient(startColorstr=#20FF8040, endColorstr=#20FF8040)"; /* IE8 */

    }

    </code>

  • Robert Nyman says:

    biziclop,

    Absolutely. Personally, though, I try to stay away from CSS hacks in my main CSS code.

  • biziclop says:

    Actually, my example shows solid background in IE8, because i didn't test it :), so don't use it.

    This is the fixed example, which shouldn't be used too, because ie9 may break it:

    .transparentoid {

    background: #FF8040; /* solid color */

    background: rgba(255,128,64,0.125); /* transparent color */

    background: transparent9; /* clear solid background for ie */

    zoom:1; /* required for the filters */

    -ms-filter:"progid:DXImageTransform.Microsoft.gradient(startColorstr=#20FF8040, endColorstr=#20FF8040)"; /* IE8 */

    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#20FF8040, endColorstr=#20FF8040); /* IE5.5-7 */

    }

    This example is more futureproof (apply the .MSIE class to the body tag somehow, or put it into a conditional css)

    .transparentoid {

    background: #FF8040; /* solid color */

    background: rgba(255,128,64,0.125); /* transparent color */

    }

    .MSIE .transparentoid {

    background: transparent;

    zoom:1; /* required for the filters */

    -ms-filter:"progid:DXImageTransform.Microsoft.gradient(startColorstr=#20FF8040, endColorstr=#20FF8040)"; /* IE8 */

    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#20FF8040, endColorstr=#20FF8040); /* IE5.5-7 */

    }

    And one more thing, filters disable the font smoothing in explorer where they are applied, so you must choose your fonts carefully.

  • Robert Nyman says:

    Absolutely, the font issue in Internet Explorer is one of it's biggest problems, so be wary.

  • […] CSS BackΒ­ground TransΒ­parency WithΒ­out AffectΒ­ing Child EleΒ­ments, Through RGBa And Filters […]

  • […] browsers. These techniques will get you started, but it is not as simple as it seems. According to Robert Nyman, you may encounter a problem with a child element’s […]

  • […] Robert Nyman beschreibt eine Methode, die schnell in Firebug funktioniert. In der dortigen Konsole gibt man eine kleine Zeile Javascript ein. Zur Umrechnung eines 30%igen Transparenzwertes (opacity: 0.3) lautet die Zeile: Math.floor(0.3 * 255).toString(16); […]

  • Me says:

    Very cool trick, helped me lots πŸ˜€

  • Shane says:

    Exactly what I needed, thanks Robert!

  • Robert Nyman says:

    Me, Shane,

    Great!

  • fadi Kashou says:

    Amazing one

    thank u

  • Evgeny says:

    Or instead of using a gradient filter, you can use the Alpha filter directly. Has this syntax: progid:DXImageTransform.Microsoft.Alpha(sProperties).

    More info in the documentation http://msdn.microsoft.com/en-us/library/ms532967(

  • cheminguyen says:

    It works like a charm! Thank you so much!!!!

  • Robert Nyman says:

    fadi,

    Thanks!

    Evgeny,

    That filter affects the transparency of the content as well, which is not what we want.

    cheminguyen,

    Thank you!

  • AceeBaBa says:

    Wonderful πŸ™‚ that's what i was searching for to complete a project today. Thanks Robert

  • Hyder says:

    Just what i needed! Thanks!

  • HChang says:

    That’s awesome.. thanks for that fix.. made life so much more easier.

  • HChang says:

    That's awesome.. thanks for that fix.. made life so much more easier.

  • Avaneesh says:

    Robert, Thanks for providing this, it's saved me a lot of time! I appreciate it.

  • sam says:

    Hey Robert,

    Is there any css trick for rounded corners in IE other than using (htc) and js? using filters or some other way?

  • Robert Nyman says:

    sam,

    Unfortunately not any way that I know of at least.

  • Benjamin says:

    GENIUS! πŸ˜€

    Thank you SO SO SO SO much for this, I have been looking everywhere when all along the code was so simple. πŸ˜€

  • Robert Nyman says:

    Benjamin,

    Glad it was helpful for you!

  • John PERRY says:

    You can easily get any hex value you want using Windows calculator:
    change view to scientific, tap in your sums (in decimal), then click hex radio button.

  • elaine says:

    Hi there,

    THANK YOU for this solution to creating transparencies.
    I am using it to create transparency color in the background of my Content area on my WordPress site and I LOVE the way it looks.

    However, I work on Mac only. I don’t have a PC and so could not see that the transparency wasn’t working for IE. A friend sent me an email and said the color was too dark behind the context text.

    I am a novice at CSS and code, and so I am still a bit confused about how to get the transparency code for my hex color that will be compatible with IE.

    So, if my rgba color code is as shown below (yes, it’s purposely set at .9, I just want a very little bit of transparency), how do I calculate what it would be for IE, and what is the resulting bit of code I’ll need to add to my CSS?:

    .post {
    margin:5em 1em 1em 1em;
    background: rgba(149, 147, 242, 0.9);
    padding: 5px .8em .8em 4em;
    color: #000
    }

    If you have the time to respond to this I greatly appreciate it!!!

  • J Ramakrishnan says:

    I Dont have words to Thank you. Thank you so much let your great work continue

  • J Ramakrishnan says:

    I Dont have words to Thank you. Thank you so much let your great work continues

  • Robert Nyman says:

    John,

    Yep, that’s an option.

    elaine,

    This should work for you:

    .post {
    margin:5em 1em 1em 1em;
    background: rgba(149, 147, 242, 0.9);
    padding: 5px .8em .8em 4em;
    color: #000

    /* For IE – resetting background color hack */
    background: transparent\9;
    * For IE 5.5 – 7*/
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#E59593f2, endColorstr=#E59593f2);
    /* For IE 8*/
    -ms-filter: “progid:DXImageTransform.Microsoft.gradient(startColorstr=#E59593f2, endColorstr=#E59593f2)”;
    }

    J Ramakrishnan,

    You are welcome!

  • Rappa says:

    Do I have to add “background: somethingsomething”, then make it transparent again? As IE doesn’t understand rgba anyway and the other browser don’t understand the IE-filters.

  • Robert Nyman says:

    Rappa,

    Yes, for Internet Explorer, either in a separate stylesheet or through a CSS hack (e.g. background: transparent\9;), you need to set the background to transparent.

  • pro.quo says:

    Thank you, this was a great help in what I wanted to do!
    It saved me a Lot of energy and time. : )

  • Matthieu says:

    Quick tips to calculte : use WolframAlpha, a mathematic search engine :
    http://www.wolframalpha.com/input/?i=0.3+*+255+in+hex
    Best regards,

  • Jim Vizecky says:

    Ahh you’re a lifesaver! Very sweet trick to avoid using .png’s to accomplish transparencies.

  • Michelle says:

    Genius! Thankyou so much!

    This is one of those things that I previously wrote off as “impossible”, and will now find an excuse to use pretty much everywhere.

  • Robert Nyman says:

    pro.quo,

    You are welcome!

    Matthieu,

    Good tip! Thanks!

    Jim,

    Yes, avoid overusage of images.

    Michelle,

    There you go! However, be somewhat cautious with filters in IE since it can affect performance.

  • Dodger says:

    One other inherent problem with this is that there’s no support for, or obvious way to get support for CSS System Colours.

    It’s perfectly easy to say:
    div.tooltip {
    background-color: InfoBackground;
    color: InfoText;
    }
    …and make a tooltip that matches the colours of a user’s interface.

    It’s a whole different problem to make a tooltip that matches the colours, has fully opaque text, and an 88% opacity background still in the InfoBackground colour.

  • Robert Nyman says:

    Dodger,

    Absolutely, good point. I’d wager, though, that that scenario is not very common, and an option could be to find out the RGB for the system colors.

  • Jamie M says:

    Thanks for this! you have solved a big problem for me! It is very much appreciated!

  • Robert Nyman says:

    Jamie,

    You’re welcome!

  • James Tan says:

    Thanks a lot for this article, very useful esp the firebug ‘calculator’ to convert alpha to hex and for cross browsers.

    thanks,
    James Tan

  • Robert Nyman says:

    James,

    Thanks, glad you liked it!

  • […] CSS background transparency without affecting child elements, through RGBa and filters – Rober… […]

  • cynthia says:

    Hi, Im trying to make it work on my page (I have a medium knowledge of css) but it doesnt work πŸ™ I would apreciate if you have an example. I think my mistake is how I made the page (I use tables normally…) I want my page to have a white frame and the white background with opacity, I would love the text to show up without the opacity…

    The background image is in the “.body”
    I have one table with the stye “.border” (with white border),
    INSIDE another table with your style “.alpha60”
    INSIDE ANOTHER TABLE with the text

    I dont know if I should use DIVS!!! please help meeeee

  • Robert Nyman says:

    cynthia,

    Please look in the CSS3 RGBa demo test page..

  • Ramiro says:

    Thanks for this blogpost. It was very helpfull (i always have problems with crossbrowser styling).

    The background transparency works now in all the big browsers.
    I use the css hack { background: transparent\9; } for IE browsers and it works great the first time i load my page.

    I have a new problem now tho. I use JQuery to to hide/fadeIn certain div’s. But while the background-color with transparency looks good the first time the page is loaded, there is no background-color when the div is fading in due JQuery. This only happens in IE btw, all the other browser works just fine.

    I guess it’s the css-hack (background: transparent\9) that causes this.

    Just wanted to share this problem. Maybe someone has had the same issue.

    – cheers –

  • Robert Nyman says:

    Ramiro,

    That could be it. I’m not sure exactly how the jQuery approach is, but maybe you can get some nice pointer on their mailing list?

  • Ramiro says:

    I looked on the JQuery forum and it seems that IE has problems with animating transparent stuff…

    When i use show() instead of fadein() it works fine.

    IE…sigh…

    Thanks for your quick reaction btw (bookmarked!)

  • Robert Nyman says:

    Ramiro,

    Well, you could potentially have a parent element with no styling and fade that one in and out, and maybe get around the IE limitation.

  • MilkyTech says:

    CSS newb here:
    I couldnt’ get the transparency to work in IE the way Robert describes at the top because I don’t know the proper way to conditionally declare background:transparent.
    biziclops trasparent\9 hack worked great however.

    you can see my results @ My Website
    Now if I could only get my sticky footer to work in IE. Everything works great in Firefox!

  • Robert Nyman says:

    MilkyTech,

    Glad you got the background color to work!

  • April says:

    Thanks for the post; things are *almost* working beautifully. Here’s my problem…can you guess? IE. I want to use border-radius and background opacity both. The problem is that in IE (9) I get a square translucent background with a nice border-radius effect, so the corners aren’t getting cut off. Obviously I’d like no background outside the rounded corners.

    Any thoughts?

    Thanks!

  • Robert Nyman says:

    April,

    Interesting. No, sorry, I didn’t know about that, but please report it to the IE team.

  • A T says:

    thanks for the help! This works great!

  • Kender says:

    For box-shadow you will want to use
        background: inherit;
    this will put the page background instead of the box-shadow color
    still working on how to get rounded corners to work though.

  • Robert Nyman says:

    A T,

    You’re welcome!

    Kender,

    Thanks, good input!

  • Off the Wall says:

    Thanks MUCH for this. I’m pretty new to the coding, but between the post and the comments I was able to get this to work just the way I wanted. Lifesaver! (time saver at least!)

  • Robert Nyman says:

    Off the Wall,

    Thanks, glad it was of use for you!

  • David says:

    Thanks very much for this; and just to comment that the code for IE 5.5 – 7 also seems to work for IE 8.

  • Fernando says:

    Hi! If this is the function to convert:

    Math.floor(0.6 * 255).toString(16);

    Whats the function to desconvert?

    Thanks!

  • Michael Reetz says:

    Isn’t the max for opacity 128 or rather 0x7F ? The resulting effect was much to dark for me and i remembered that the values for opacity only range from 0 to 0x7F . So i tried 0x4C instead of 0x99 and the result was much better.

    Thanks for this great information

  • Robert Nyman says:

    Michael,

    Hmm, it might be so. Glad you found a solution that works!

  • Michael Reetz says:

    please disregard my comment. in my case the IE has somehow drawn the black background and the opacity. So, the resault was to dark in IE

  • Robert Nyman says:

    Michael,

    Ah, right: yes, you need to remove the background color for IE, with conditional comments or CSS hacks, e.g.:

    background: transparent\9;

  • […] CSS Background Transparency Without Affecting Child Elements, Through RGBa And Filters […]

  • […] article here explaining how to work out the start and end values: CSS background transparency without affecting child elements, through RGBa and filters – Robert's ta… […]

  • Tim says:

    Here’s and interesting subplot…

    I’m using this trick for navigation- the transparent background is behind a dropdown part of the menu. I have some padding between the top level and the dropped-down part for clarity. In FF everything works just fine when you slide the cursor from the hovered over the padded area and to the rest of the list (because the elements are touching), but in IE, when mousing over the translucent area between elements, the cursor disengages with the hovered as if there is no element there, and the rest of the menu disappears before you can get to it. IE is just way too much fun!

    Any thoughts?

  • Robert Nyman says:

    Tim,

    Interesting. Depends on the element you have padding on, if it’s the containing element or the first one in the sub menu part. I’d play around with different approaches to see how it behaves.

  • Matthias says:

    Great Post! Helps me a lot ….
    Damn opacity on childs πŸ™‚

    Thanks & Cheers,
    Matthias from Webdesign MΓΌnchen and Reifen online

  • Robert Nyman says:

    Matthias,

    Glad it was helpful to you!

  • Michael says:

    This is great! Thanks!

  • Jverdey says:

    Works great !
    Thanks a lot!
    sorry for my bad english

  • Robert Nyman says:

    Michael, Jverdey,

    Thanks, glad you like it!

  • Miikka says:

    There’s a bit of a problem with IE’s transparency filters. I tried using them in table cells, so the cells would have a background color but still see the gradient in background of table. While I put the ms filters (either one does this), All the contents ni the cells disappeared (text, images, etc).

  • Robert Nyman says:

    Miikka,

    It could be related to the hasLayout bug, so maybe that’s worth looking into.

  • Matt says:

    @Ramiro

    I have a problem using .animate with the IE filter. It seems to pick up the background color from the element.

    I have an ul list sitting in a div with a semi transparent background (as above). ul and li elements are all css background transparent.

    When the jQuery function is fired, the background of my list element briefly flickers to the background color, then does the animated fade to the new color correctly.
    The trouble is that it also does this when I fade the color back to transparent… I get a quick flash of background color in the background of my li element, then the fade from the new color to transparent BUT instead of transparent I now have the background color as my base color, leaving the background of my li element as color and not transparent…?

    Any thoughts people?

    Cheers,

    Matt

  • Robert Nyman says:

    Matt,

    The only option I believe is to animate the parent or child element in relation to the one with the transparency, and see if that works.

  • Matt says:

    Hi there,

    Thanks for the reply Robert.

    My hierarchy is this:

    <nav id=”NavContainer” class=”alpha50Grey”>
    <ul id=”navigation”>
    <li class=”navbgfade”>
    <a href=”” id=”nav-home”>HOME</a>
    </li>
    <li class=”navbgfade”>
    <a href=”” id=”nav-portfolio”>PORTFOLIO</a>
    </li>

    </ul>
    </nav>

    It is the <nav> (HTML5) container that has the alpha transparency. I am then animating each <li> item (navbgfade).
    Works perfectly in Firefox, Safari et. al. But no joy in IE πŸ™

    My jScript for animating is as follows:

    $(‘#navigation li.navbgfade’).hover(
    function() {
    $(this).stop(true, true).animate({backgroundColor:’#7d7d7d’}, 150);
    }, function () {
    $(this).stop(true, true).animate({backgroundColor:’transparent’}, 500);
    });

    If anyone has any ideas, I don’t mind tackling it in a different way but surely this should work?

    Regards, Matt.

  • Robert Nyman says:

    Matt,

    Not necessarily, though. Animation with jQuery and transparency in IE is very hard to make work.

  • Matt says:

    For now (until the jQueryUI or John Resig’s “jQuery Color Animation” script can handle this IE issue) I think I will either set the background to a solid color in IE browsers OR script the jQuery function so that IE browsers don’t fade the background color on hover and just switch from filled to transparent (which I have got working quite easily using jQuery to switch css properties). Not ideal but I guess it’s graceful degradation.

    I’ll post back if I improve on this compromise πŸ™‚

  • Robert Nyman says:

    Matt,

    Good luck, and please post back if you find a good solution!

  • […] CSS background transparency without affecting child elements, through RGBa and filters MSDN: Gradient Filter IE9 Only Hack ??+??: Del.icio.us / ???? / QQ?? / Google?? / ?? » CSS4 ???WebRebuild ??: ???CSS????????WebReBuild 2011?????Alice ??????? CSS ?????? ?? » CSS ?? » […]

  • Tom Mepham says:

    Brilliant, thank you πŸ™‚ πŸ™‚

  • Robert Nyman says:

    Tom,

    Thanks, glad you like it!

  • […] CSS background transparency without affecting child elements, through RGBa and filters Tweet a comment (function() { var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true; po.src = 'https://apis.google.com/js/plusone.js&#039;; var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s); })(); Follow me on Twitter RSS Posted in CSS,Developing,Technology,Web browsers | 219 Comments | […]

  • thank you all for sharing …
    all this tricks for IE compliancy is hell !

    @ Matt :
    am tryin’ to set opacity for a website but nothing worked !
    maybe js will resolve my issue ! thanks

    Sebastien

  • Puiu says:

    You should sing in a Rock band!
    …because you ROCK!!!! πŸ™‚

    You solved my problem!

    Thank God for people like you!

    All the best,

    Puiu

  • we can use,

    opacity: 0.5;
    -ms-filter:”progid:DXImageTransform.Microsoft.Alpha(Opacity=50)”;
    filter: alpha(opacity=50);

    for all browsers.

  • Robert Nyman says:

    Thiyagarajan,

    No, you can’t. Just as explained in the article, that affects the transparency of all the content in the element, not just the background. Besides, your syntax only works in Internet Explorer and no other web browser.

  • Dimitri says:

    hey mate i need to thank you! was going crazy to find the solution for this exact problem! by the way nice blog see you dimitri

  • Eliyas says:

    Im a newbiee…..in HTML

    just a question

    is there a way to use opacity in background image…?? or do i have to use a .png image with less opacity??

    .anyclass{
    background:url(image/notepattern.jpg) repeat;
    }

    Opacity just have to effect the image..

    is there any solution?

  • Robert Nyman says:

    Eliyas,

    You could use the opacity property (and workarounds for older versions of IE), or have a 24-bit PNG image with alpha transparency.

  • Andre says:

    Thank u for this post. Just what we needed!

  • Ray. says:

    hey!

    i need the background color of a “text box” to be semi transparent.

    it looks like this:

    #container{

    margin:0 auto 15px auto;
    width:700px;
    padding:10px;
    background-color:#ffffff;
    color:#303030;
    border:20px solid #000000;

    }

    so i want FFFFFF to be semi transparent, so you can see my background image on the site.
    i made it work, but.. the text got transparent too, and i only want
    the background color to be alpha.

    any help? πŸ™‚

    i’m a n00b too :P.

  • Robert Nyman says:

    Ray,

    You need to set the background with RGBa, as explained in this blog post:

    background: rgba(255, 255, 255, 0.6);

  • Ray. says:

    thanks, man!!

  • george says:

    i is not working properly in my site. if we are not using the background: transparent prop, i works for moz as well as chrome. but not for IE. otherwise it works only for IE. why it is so??? πŸ™

  • Robert Nyman says:

    Ray,

    You are welcome!

    george,

    Please see the solution in this comment.

  • Jeremy Dean says:

    Thank you for this! I realize this post is nearly two years old, but this was just what I needed! Thanks again!

  • Robert Nyman says:

    Jeremy,

    Good to hear!

  • […] How to adjust the opacity of the background of a div without affecting child elements: […]

  • Beata says:

    Hello,

    Everything works great but I can’t understand how how calculate the filter value out of rgba.
    I am using:
    background: rgba(239, 234, 192, 0.9);

    Thank you,

  • Robert Nyman says:

    Beata,

    When it comes to the transparency part, please do as described in the post: use Google or paste the above code snippet into Firebug or any other web developer tool out there.

    With the other three parts, you can use a RGB-to-Hex converter.

    Good luck!

  • […] explains how this is the best solution to achieve this effect for all browsers. You can read it here. EmailtoImageAbout Moogle Stiltzkin View all posts by Moogle Stiltzkin → […]

  • Well, the solution exposed here seems to me a bit complex.

    You can nest and set z-index to put opacity effect only in background.

    Hope it will help…

  • Robert Nyman says:

    Flaminio,

    That is an option too. However, using RGBa and just adding an extra value for opacity is quite easy. Only hassle is older versions of Internet Explorer.

  • JT says:

    Exactly what I was looking for.

    Only one correction. If I correctly understand image formats bit depth, PNG with alpha channel are 32 bit, not 24 (8 bit for red, 8 for green, 8 for blue and 8 for alpha). 24 bit PNG are RGB only. The same is valid for BMP.

  • Robert Nyman says:

    JT,

    You are right. The extra 8 bits are reserved for alpha. I think I used the 24-bit reference, since that’s what you will find everywhere, in Photoshop menus and similar.

  • Hi,

    Can someone help me add the transparency solution in this guide to my site ? I’m not a programmer so i couldn’t figure it out :/

  • Robert Nyman says:

    Moogle,

    Please try by copying the code as it is in the blog post. Alternatively, the CSS3 RGBa demo might help to check out.

  • John Winterton says:

    Hi Robert

    Great post and really helpful. Having problems though. Got all of this working in Chrome, Firefox etc. Now got it working in ie6 using a different stylesheet. But not working at all in IE8.

    I’m using a web page with a content layer and sidebar layer both with transparent backgrounds.

    Using comments in the head tag to cover IE.

    IE 6 CSS

    #content {
    padding:20px;
    clear:both;
    width:920px;
    /* For IE – resetting background color hack */
    background: transparent;
    /* For IE 5.5 – 7*/
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#7f497B90, endColorstr=#7f497B90);
    }

    #sidebar{
    position:absolute;
    top:123px;
    width:210px;
    right:20px;
    padding:20px;
    font-size:8pt;

    /* For IE – resetting background color hack */
    background: transparent;
    zoom:1; /* required for the filters */
    /* For IE 5.5 – 7*/
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#990b3542, endColorstr=#990b3542);
    }
    }

    If I create the CSS code for IE8 and refer to a specific style sheet using a comment, and if the background is set to transparent then I get no color and if I set it to say, background/5 or 5 it’s solid color.

    Any ideas where I am going wrong?

    regards

    John WInterton

  • Robert Nyman says:

    John,

    From what I can see from your posted code, you don’t have the -ms-filter property needed for IE8 (as outlined in the post).

  • […] Die LΓΆsung habe ich im Blog von Robert Nyman gefunden: Original Artikel auf Englisch Β  […]

  • Oriza says:

    Short code makes my web looks great.. thanks a lot

  • Inao says:

    genial,
    muchas gracias!!!

  • Alex says:

    Really interesting posts. I’m trying to text to appear when the mouse rolls over boxes on a page.
    The code I’m using is here:
    #t01 {
    width: 209px;
    height: 57px;
    position: absolute;
    top: 510px;
    left: 539px;
    border: 1px solid blue;
    border-right-width:15px
    }

    #t01 span
    { width: 20em;
    font: 75% Arial, sans-serif;
    color: black; background: white;
    border: 3px solid black;
    display: none;
    position: absolute;
    top: 40px;
    left: 3px; }

    This is then triggered with this:

    Text to display

    This works exactly as expected in all but IE. In IE, only rolling over the border shows this text. I’ve tried setting opacity for the fill but have had no success. Any ideas where I’m going wrong or how I can fix this????

  • Robert Nyman says:

    Alex,

    Not sure. Have you tried setting hasLayout for IE, through zoom: 1; or height: 1%;?

  • KPSUK says:

    Just wondering if there is a way to implement this, but to ‘disable’ links/buttons etc on the parent window.

    See we have a ‘Waiting’ popup, which grays out the main window. It works in FF but in IE we have had to implment this workaround. The only problem is, all links on the main page are still clickable.

  • Robert Nyman says:

    KPSUK,

    That would rather be a bug in IE. I’d have only a script for IE then, or try any hasLayout fix and see if it works.

    Also, make sure that the overlay element is as high up as possible in the hierarchy – it might help.

  • designworks says:

    The article is more than 2 years old. But it works also today on the browser. This combination works fine at a actually project.

    Thanks for the posting!

  • Robert Nyman says:

    designworks,

    Good, glad it was useful!

  • Lilah says:

    THANK YOU!!!

  • Robert Nyman says:

    igneta, Lilah,

    You’re welcome!

  • blickwerker says:

    Super geschichte! Endlich keine Trickserei mehr bei der Positionierung der Elemente, damit die Kinder von opacity verschont bleiben.

    Tipp am Rand: der HEX-Wert fΓΌr den IE-filter kann auch mit Google Calculator schnell bestimmt werden: (0,6*255) in hex

  • Alrick says:

    Excellent Robert. This works like a charm in IE9.

  • Robert Nyman says:

    Alrick,

    Good to hear!

  • Jason Deegan says:

    Bravo! Just what I needed…

  • The code looks good, need to test it because i need it for a website ..

  • Chevrock says:

    This coding is probably the solution to my transparency problem but I don’t know where to install it in my sites files. Would you mind giving me a heads up?

  • saboteur says:

    Doesn’t work in IE6 for me but at least does work in FF (v15) and Chrome (v20).

  • Simha chalam says:

    Very Excellent. Working in IE and FF. Thank you a lot.

  • Simha chalam says:

    Very excellent. Exactly what I want.

  • Ted says:

    I copy/pasted your “Bringing it all together” and it works like a charm. Changing the RGB settings is easy as pie, just need a color chooser with RGB values then play with the opacity value. My site is offline at this posting but you can see what I did with it in a couple of days. Thanks for sharing this! πŸ™‚

  • Robert Nyman says:

    Ted,

    Great to hear!

  • […] Para saber mais leia o post:Β http://robertnyman.com/2010/01/11/css-background-transparency-without-affecting-child-elements-throu… […]

  • When height is known you can make an absolutely positioned element with the desired opacity set in CSS (using necessary filters for ancient versions of IE). Give the element a z-index of 1 and position it correctly.

    Then create your content inside a separate relatively (or absolutely) positioned div over the absolute div with a z-index of 2 and don’t declare opacity. As the underlay div is outside of the document flow it shouldn’t affect layout and isn’t related to the relative div at all.

    Even if you wanted this as a semi-transparent background to a continuous scrolling site layout(i.e with dynamic height) it is actually possible using a clever combination of overflow declarations in CSS and intelligent HTML layout.

    Cutting out PNG graphics means there is then no alpha PNG fix required for IE6 and below, also as no graphics are required you cut out the need for continuous redrawing to create the background, saving IE 5-8 from a heart attack when scrolling the page. i accept it can’t be used in all situations but I’ve managed it for a lot and it works in all browsers.

  • Tommaso says:

    IE8 does not work with rgba values.

  • juanra says:

    Thanks a lot!!! very useful!

  • Ognjen says:

    Thanks man, your solution was very helpful for my project.

  • Steve Jones says:

    Thanks for the tutorial, works in all modern browsers.

  • karikatur says:

    Great post Robert!

    Thank You!

  • arsalan says:

    thank you so much it was quite a strong guide. that rgba trick saved me a lot of time. regards

  • Elmurod Kuriyozov says:

    Thank you guys, It’s what I’ve been searching. I’d a problem with solving the background transparency, now:here I’m. Good job.
    :-))

  • You are a life saver!!! Thanks so much, and great post… css tricks is awesome too btw!

  • Robert,

    Not being a programer, could you please briefly explain how I would apply this to my test site (http://theswinginswamis.com/home4.htm). I would like to be able to adjust the opacity of the cell background without effecting the text. Thanks!

    Bryan Hillman

  • Robert Nyman says:

    Bryan,

    Sorry, but I don’t have the possibility to do that. You need to use the CSS code provided in this blog post, and it’s always a good idea reading up on CSS anyway.

  • KathyAZ says:

    Bryan,

    Try this for your background-color (remove/disable your existing code for bg color and opacity):

    .opacity {
    background-color: rgba(113, 113, 113, 0.7);
    }

    It will apply 70% opacity to the box and leave your text white. (Nice background pic! I can see why you want transparency.)

    I just discovered this solution today so I’m a newbie at using this (R-G-B-a), so if you have further questions I would probably refer you to the rest of the group, or to the link that Robert gave you above!

    Good luck. (Note: If using I.E., you’ll need version 9.)

    Kathy

  • KathyAZ says:

    Robert – I meant to say above, thanks for the info!

    Great to find out now that Internet Explorer is not an issue now with version 9, either for rounded corners or background opacity.

    For the site I’m using the transparency on, I am not being sensitive to users of I.E. 8 and older… that might be wrong but, on this site, if they see square corners and a solid color, I don’t mind. They’ll be pleasantly surprised when they upgrade to 9.0.

    ka

  • Robert Nyman says:

    Thanks KathyAZ!

  • 3.6.13 says:

    […] CSS Background Transparency that doesn’t affect children […]

  • Jufri says:

    Wow.. this work
    Thanks KathyAZ!

  • Jufri says:

    Thanks Robert Nyman

  • stef says:

    Hi,

    I have the following code now, it works well – except in IE10!
    In IE10 I don’t so a background at all. If I remove the line background: transparent\9; everything works fine in IE10, but the older IE versions don’t have transparency.

    What can I do?

    background: rgb(196, 210, 221); /* fallback for web browsers that don't support RGBa */
    background: rgba(196, 210, 221, 0.8); /* RGBa with 0.8 opacity */
    /* for ie */
    background: transparent\9; /* for ie - resetting background color hack */
    zoom:1; /* for ie - required for the filters */
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#ccc4d2dd, endColorstr=#ccc4d2dd); /* for ie 5.5 - 7 */
    -ms-filter:"progid:DXImageTransform.Microsoft.gradient(startColorstr=#ccc4d2dd, endColorstr=#ccc4d2dd)"; /* for ie 8 */

  • Robert Nyman says:

    stef,

    Only thing I can think of is using Conditional Comments to target older IEs in a separate CSS file.

  • Tara C says:

    Thanks Robert, Great post! I thought I was going to be stuck with this horrible IE display.

    Question: before finding your post, I was using
    background-color:hsla(0,65%,100%,0.0);
    Can I still implement that for newer browsers, or is it going to screw up everything to add hsla to the mix?

  • Tara C says:

    To clarify – i’m wondering if throwing hsla in will solve the IE10 display issue… though that’s probably just wishful thinking…

  • Robert Nyman says:

    Tara,

    Well, it could potentially work, but I’m not sure. I guess you need to try and see in practice that it actually does work.

  • stehlicek says:

    wow – such a smart solution:) Thanks!!

  • Ali says:

    I should say that I got lucky getting it work! LOL
    The only thing I needed to change to get white background was changing 0,0,0 to 255,255,255 and 99000000 to 99FFFFFF!
    Thanks for this beautiful and advanced tip! It just saved me!!!

  • […] A thorough walk-through on the snippet is given here: CSS background transparency without affecting child elements, through RGBa and filters […]

  • Old, but a still helpful and clean solution! Thank’s for sharing!

  • Carlos J says:

    Hello everyone. Excuse my English. Y try to make the example but it does not work. Only shows a dark gray box on the div to which apply opacity. I need to add something else to my page?

    Note: I am using bootstrap.css

  • […] Change the opacity without affecting the child elements by using rgba and filters. Reference: robertnyman.com […]

  • This rgba solution really helps me a lot. Thanks buddy for the post.

  • ashyda says:

    Wow, over 4 years later this blogpost still helps people to create nice solutions.
    Thanks dude. πŸ™‚

  • Gediz says:

    Wow. It’s still helpful after 4 years. Thanks so much.

  • shari says:

    You are the man! God bless you!

  • mundocaco says:

    thank you for share your code!
    Very helpful πŸ˜‰

  • Gabriello110 says:

    How can I set background .5 transparency and set a litle square of 100x100px .1 transparency

  • Manoj kumar says:

    In html page how and where put this code .

    i want to display a png alfa images with transparency.

    .alpha60 {
    /* Fallback for web browsers that doesn’t support RGBa */
    background: rgb(0, 0, 0);
    /* RGBa with 0.6 opacity */
    background: rgba(0, 0, 0, 0.6);
    /* For IE 5.5 – 7*/
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000);
    /* For IE 8*/
    -ms-filter: “progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000)”;
    }

  • jasa logo says:

    It’s helpful for me as designer. Thanks

  • Baitul Ulum says:

    When I stuck, I found this tutorial. Thanks πŸ™‚

  • Carlos says:

    Many thanks πŸ™‚

  • Joseph says:

    Nice work. Still a solid solution.

  • sarah moris says:

    much appreciated the effort. keep the good work on. thanks

  • Katie says:

    You’ve just saved me hours of pain! Thank you Robert πŸ™‚

Leave a Reply to Hyder Cancel reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.