Making a semi-transparent background behind opaque text in CSS

by Posted on

When I receive the final PSDs from a designer I invariably want to reach through my computer and slap him for making my life difficult. With very few exceptions, there will almost always be at least one design element that is frustratingly hard to achieve using HTML and CSS (no matter how easy the designer may think it will be). The new properties available in CSS3 have reduced this frustration thankfully, but from time to time there are problems that crop up. One design feature that can be a little frustrating to work around when coding is the inclusion of normal, opaque text on a semi-transparent background. Here is a simple solution to get round this problem.

In the past I have used absolutely positioned divs and the z-index property to achieve the desired result. There is, however, a much simpler solution.

You want the background of a div to be transparent, but not the text – this requires using an RGBa value for the background colour of the div. From time to time you may use RGB values for setting colours in your CSS (e.g. rgb(170, 187, 97)), an RGBa value simply adds an alpha-transparency value to that code, so the HTML and CSS for this is:


<div class="container">Lorem ipsum dolor</div>

view raw

markup.html

hosted with ❤ by GitHub


.container {
background: rgb(170, 187, 97); /* Fallback */
background: rgba(170, 187, 97, 0.5);
}

view raw

style.css

hosted with ❤ by GitHub

This would set the background of the div to have an alpha transparency value of 0.5 – this can range anywhere from 0 (fully transparent) to 1 (fully opaque). This is different from the opacity property, as it only affects the background and not the div contents as well. For browser compatibility’s sake it is always a good idea to set a fallback background colour just in case. In this case, the best option would be to set it to the same RGB value as we have already used (just without the alpha transparency). The browser support for the RGBa colour value is absolutely fine all recent browsers, but will fail in older ones (IE is the main one to watch, as it is only supported from IE 9 and up) so the fallback colour is always necessary.

16 Thoughts

  3. Hi, My company is in the process of going live on our new site. I found the picture you posted on your Transparency blog post. We would like to use that picture on our site.
    Can I get your permission to use it?

    Reply

  7. On my website at the above, if I want to change the color of the background on the flash, do I change the so.addParam(“wmode”, “transparent”); to opaque. I want the background around the images to be 663300. Thanks and Semper Fi

    Reply

  10. its very simple. Here is code for opacity effect. simple use the rgba color.
    in HTML e.g:

    in CSS:
    .foo
    {
    height: 100px;
    width: 100%;
    background-color: rgba(215, 44, 44, 0.4);
    }
    here is the link to get the rgba colors code. http://www.css3maker.com/css-3-rgba.html
    Try this.
    Best of Luck

    Reply

  15. Your translucent background css code i a widget was most helpful – Cant thank you enough. Much appreciated.

    Reply

Leave a Reply