Change background opacity without affecting text

I see this being used in websites across the net and used in plugins for various common free CMS’ however I have never needed to set the set the background opacity without effecting child elements. It is surprising quite how much incorrect information is floating around on the internet which would results in everything being opaque.

Finally found an example which told me what I needed to know. Tested in the latest versions of FireFox, Chrome and Internet Explorer on the PC; also in Firefox, Safari and Chrome on the Mac.

Example:

Red background set to 50% opacity and white text

Here is the content.
Background should grow to fit.

 

Manage background opacity without effecting text

 

<style type="text/css">
   .container
   {
       position:relative;
   }
   .content
   {
       position:relative;
       color:White;
       z-index:5;
       padding:10px
   }
   .background
   {
       position:absolute;
       top:0px;
       left:0px;
       width:100%;
       height:100%;
       background-color:Black;
       z-index:1;
       /* These three lines are for transparency in all browsers. */
       -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
       filter: alpha(opacity=50);
       opacity:.5;
   }
</style>
<div class="container">
   <div class="content">
       Here is the content. <br />
       Background should grow to fit.
   </div>
   <div class="background"></div>
</div>

 

How does it work?

 

  • Main container is set to relative position. It contains the div with the opacity set and a div with the content you wish not to be affected;
  • The div with the opaque background is absolutely positioned to top left. Because the containing div has a relative position the div will align itself to the top left of the containing div and not the top left of the page;
  • The div with the copy and text is set to effectively float above the translucent background.

 

Credits

This solution comes thanks to Gorkem Pacaci from a StackOverflow answer

17 Comments

  1. Murphy
    September 3, 2014 - Reply

    Good solution, but it can be done in the one single line of code! Just use semi-transparency like here:

    http://basicuse.net/articles/pl/textile/html_css/css3_semi_transparent_background_color_using_rgba

    Anyway, your solution will work in old versions of IE.

    • Sumobaby
      May 18, 2015

      Hi Murphy,

      You’re quite right. Things have moved on since 2011 and the solution above is not the most current method of achieving this effect.

      Thanks for pointing that out

  2. amrit
    August 9, 2013 - Reply

    This is a great post, loved it..
    I want to increase the opaqueness of the watermark around my text.
    HELP

    • Sumobaby
      August 9, 2013

      Hey Amrit,

      If you’re referring to your Blogspot site then this post isn’t relevant to your situation. You would need to reference a different background image against the .post-outer class. One which is less transparent. This would make you text clearer.

  3. Robin
    July 30, 2013 - Reply

    >>Thanks for the tip it works but it will not let me access links in the content div. Any tips on how to get that working?

    I have the same problem. As soon as the opacity is set to lower than 1 no links are working.

    • Sumobaby
      July 30, 2013

      The z-index of the top layer (where the content and links live) must have a higher integer value than the background.

      Do you have this publicly accessible?

  4. Jaye
    May 20, 2013 - Reply

    Hi,

    I have an issue with a template im using on blogger.. ive got everything running how i like it, and managed to add a fixed test backbround image.. however i have a WHITE STRIPE along the top of the screen that i want to get rid of or add opacity to it so as i JUST DONT WANT IT..lol

    Help Appreciated..

    http://www.moviekangz.com have a look.. HELP..

    • Sumobaby
      May 20, 2013

      Based on the premiss of you not have a great deal of control of the outputted header code I would suggest the following.

      Currently .stripdown class background is set to white. I would take out “background-color: #ffffff; background-image: url(); background-repeat: repeat; background-attachment: scroll;”

      /* .stripdown { background-color: #ffffff; background-image: url(); background-repeat: repeat; background-attachment: scroll; color: #535346; height:90px; margin-top:-40px; } */

      begin to make changes to #header-wrapper. It is unlikely that you will be able to have the background opacity not effect the rest of the header in this case.

  5. Farah
    March 16, 2013 - Reply

    hehe thanks! yes i tweaked it a little to allow scrolling and it also didn’t bite me 😀 you’re a life saver thanks so much!

    • Sumobaby
      March 18, 2013

      Phew, thank goodness.

      We’d love to see how you made use of this tip if you have a publicly accessible link?

  6. Farah
    March 14, 2013 - Reply

    THANK YOU SO MUCH!!!! I’ve been looking for hours and hours trying to figure this out on the web, and don’t understand why google hates me, but I keep getting crap info, and html/css split into two parts and I am a total noob with coding!

    I could kiss you right now !! <3 YAY

    • Sumobaby
      March 14, 2013

      You’re welcome, glad it was of use to someone.

      Google doesn’t hate you

  7. Sandra
    November 30, 2012 - Reply

    Thank you! very useful article! it helped me a lot:)

    • Sumobaby
      November 30, 2012

      Fantasic, very pleased you’ve found it useful. Should you find yourself struggling let us know

  8. Chuck
    November 7, 2012 - Reply

    YES! Thank you.

  9. marcus
    October 29, 2012 - Reply

    Thanks for the tip it works but it will not let me access links in the content div. Any tips on how to get that working?

    • Sumobaby
      October 29, 2012

      Send me a URL of a page where you have an example of the issue and what it is you’re trying to achieve

Drop a comment

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