Flag This Hub

how to make Transparent background for blogs

By


Finally a fix for cross browser background transparency, you have search and now you shall find. This is coding to make a cool transparent background for blogs on platforms like blogger, word press etc, But this will work anywhere HTML and CSS input is allowed, But we are going to focus mainly on blogs because this is the area most people need help ( including me ). When most hear the word "background" they think the whole page background which often is coded under body or wrap


Example css wrap code

#outer-wrapper {
        background: #555;
	width: 940px;
	margin: 0 auto 0;
	padding:10px;
	line-height: 18px;

But realistically it does not make sense to use a semi transparent background in that part of the css because well, if the body or sometimes wrap will encompass the entire web page and a semi transparent background will just look like a light grey. You need substance behind the transparent background to actually show its transparent!..... confused yet?in reality you want to put the semi transparent background on your #Outer-wrapper ....or in other wrappers or containers, yes there can be many names and variants depending on who has coded your template. Below is the code for transparent backgrounds or semi that works with most firefox versions and ie versions... and alot of other browsers as well including cell phone browsers.

Transparent/semi code

/* RGBa with 0.6 opacity */
       background: rgba(0, 0, 0, 0.6);
       /* For IE 5.5 - 7*/
      filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000,     endColorstr=#99000000);
        /* For IE 8*/
        -ms-filter:   "progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000)";

The finished transparent code

#outer-wrapper {
       
	width: 940px;
	margin: 0 auto 0;
	padding:10px;
	line-height: 18px;
      
       /* RGBa with 0.6 opacity */
       background: rgba(0, 0, 0, 0.6);
       /* For IE 5.5 - 7*/
          filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000,     endColorstr=#99000000);
        /* For IE 8*/
        -ms-filter:   "progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000)";

In the end

So many people say this cannot be done for IE 8 and under but in fact as you will see this works 100%. There is other coding for semi transparent background and you migh want to put them together with this code for even more cross browser compatibility. Rule number one, do not get frustrated, learning this mind boggling stuff take a while and you will do it... just in your own time. I cannot tell you how many times I tried to code something only to end up at a loss thinking it can't be done, just to find out it can I just over looked something.

Comments

No comments yet.

Submit a Comment
Members and Guests

Sign in or sign up and post using a hubpages account.



    Like this Hub?
    Please wait working