how to make Transparent background for blogs
By kronic26
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.
You may also want to read
- Easy ways to understand blog traffic
Why does my blog not get any traffic? easy because blogs work like relationships - How to put adsense in a post on blogger
You have searched everywhere and found mixed answers. - 1000 site visits per day switching post title | Blog traffic now
Blogs by there very nature tend to get allot of traffic - simple ways to get 1000 site visits per day
Getting to the high rollers club of 1000 site visits - Using a free forum for your blog
For many bloggers often a question will arise, whether to add a free forum to there blogger blog or word press blog, and there is only one answer..... Yes. - how to get traffic from reddit
Reddit is one of the leading social sites
Comments
No comments yet.