Jump to content
Sign in to follow this  

How To Make The Content Container Background Slightly Transparent

Recommended Posts


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



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.



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