Hugh Lashbrooke

Community builder by day, tabletop game designer by night.

Making a semi-transparent background behind opaque text in CSS

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:

View this gist on 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 responses to “Making a semi-transparent background behind opaque text in CSS”

  1. Kim Avatar

    Hi Hugh,

    Thanks for this great tut. Really helpful.

  2. Ivan Avatar

    Dude– this is great! I was just struggling with absolute positioning and z-index stuff. Your solution is elegant. Thanks!

  3. Andie Avatar

    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?

  4. Jana Avatar

    So helpful! Thank you!

  5. YunoTheNinetales Avatar

    ;___; I love you.

  6. pankaj Avatar

    really great ….. 🙂

  7. Bob Carr Avatar
    Bob Carr

    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

  8. Carrie Avatar

    Thanks, you saved me hours of aggravation!

  9. Chantel Guinn Avatar
    Chantel Guinn

    Oh my god, I love you.

  10. Hafiz Ameer Hamza Avatar
    Hafiz Ameer Hamza

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

    in CSS:
    height: 100px;
    width: 100%;
    background-color: rgba(215, 44, 44, 0.4);
    here is the link to get the rgba colors code.
    Try this.
    Best of Luck

    1. Hafiz Ameer Hamza Avatar
      Hafiz Ameer Hamza

      oops.. i missed html code. Here is now

  11. chloe kim Avatar
    chloe kim

    wow so simple and elegant. thanks!

  12. personal trainer london ky Avatar
    personal trainer london ky

    You are able to still guide the originator to fill out an application at your
    personal bank when that is your choice.

  13. Travis Avatar

    Love! Thanks.

  14. Briana Finney Avatar
    Briana Finney

    Absolutely simple and fabulous! Best solution I’ve seen to this to date! Thank you!

  15. Leon Avatar

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

Leave a Reply

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