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

Comments: 17

  • marcus
    October 29, 2012 4:57 pm

    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?

  • Chuck
    November 7, 2012 9:17 pm

    YES! Thank you.

  • Sandra
    November 30, 2012 1:41 pm

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

  • Farah
    March 14, 2013 8:43 pm

    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

  • Farah
    March 16, 2013 4:53 am

    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!

  • Jaye
    May 20, 2013 11:57 am

    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..

  • Robin
    July 30, 2013 3:22 pm

    >>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.

  • amrit
    August 9, 2013 4:31 pm

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

  • Murphy
    September 3, 2014 7:14 am

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

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

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

Post a Comment

Sumobaby