Jump to content
Sign in to follow this  
cdracos

How To Make The Content Container Background Slightly Transparent

Recommended Posts

cdracos

I am struggling to see how I get my content to have a white background colour but slightly transparent so that the default image background of the site to be visible. Do I need a special tool or is there somewhere I can alter the css in order to reduce the alpha transparency of the body content.

Share this post


Link to post
Share on other sites
Danny

Hi,

 

Try this

 

#site .content {
background: rgba(255, 255, 255, 0.6);
}

However, please bear in mind that rgba isn't compatible with all browsers and you may need to tweak it slightly to get your desired look. I recommend you start using Firebug and also bookmark W3 Schools for reference.

 

http://www.w3schools.com/css/


Please search our forums, before posting!

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

Sign in to follow this  

  • Similar Content

    • alisamski
      By alisamski+
      Hi,
      Having a heck of a time here.. first hyperventilating on having the new DMS system come out when I have major deadlines... UG..
       
      However, need a bit of help.
       
      Trying to make a full page rev slider... with header content, content post over it with a transparent background gradation top and bottom.
       
      See layout here
       
      Visit Site in works Here
       
      1. Cannot find css to raise content even when using firebug
      2. I do have css image background on the column area (however notice how the gradation is replicating within each area. (css seems to be wrong)
       
      Here is code:
      .row, .row-fluid, .editor-row { background: url(http://aerospecaviation.midniteoil.com/wp-content/uploads/2013/08/contentfade.png) repeat scroll 0 0; width: 100%; } .revslider-container {width: 100% !important;height: 100%;position: relative;padding: 0;overflow: visible;margin-top: -20px;z-index: -2;} Any suggestions will be much appreciated.
       
       
×