Adding a cross-browser transparent background

Adding a transparent background that is cross browser compatible is relatively simple.  It does not rely on CSS3 and so this method works for the current versions of Chrome and Firefox as well as IE8 and above.

Add this to your template:

<div class="container">
   <div class="content">
       Here is the content. <br />
       Background should grow to fit.
   </div>
   <div class="background"></div>
</div>

Then add this to your CSS:

   .container {  
     position:relative;  
   }  
   .content {  
     position:relative;  
     color:White;  
     z-index:5;  
   }  
   .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;  
   }  

This was an answer on StackOverflow