Skip to main content

Transparent Backgrounds Of Your Page Or Columns In Blogger

I have many times been asked about changing the background of the main page to an image, and also about how to make the content columns transparent so that the background will show through. So here is your answer. You can also use this technique to change the background of just one content column if you prefer. Just follow step two for the content column(sidebar left/right etc)you are wanting to add the background to instead of the main wrapper.

PART 1 - Changing background for whole page
find this code, or similar, in your template
body {
background: $bgColor;
margin: 0;
padding: 0px;
font: x-small Verdana, Arial;
text-align: center;
color: $textColor;
font-size/* */:/**/small;
font-size: /**/small;
}


and replace the
$bgColor;

with
url("http://www."url_of_your_image".com);
PART 2 - Changing background of specific content column

If you are only wanting to change the background of your main column find this code in your template
#main-wrapper {
width: 484px;
margin: 15px;
float: left;
background-color: $mainBgColor;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}

and either add
background: url("http://www."url_of_your_image".com);
or edit as in first example. The procedure for changing the background of your sidebar left/right wrappers is the same except you need to find these blocks of code, or similar.
.sidebar-wrapper-left {
width: 165px;
float: left;
background-color: $mainBgColor;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}
.sidebar-wrapper-right {
width: 275px;
float: left;
background-color: $mainBgColor;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}
PART 3 - Transparent Backgrounds

If you want your your main content and sidebars to be transparent so that the page background shows through change the main page background as described in the the first part of this post and then change
background-color: $mainBgColor;
to
background-color: rgba(0,0,0,0);
for your content wrapper, main wrapper and sidebar left/right wrappers.

later all and have a profitable and productive day
Labels:

Comments

Post a Comment

Popular posts from this blog

What the F Does the C Stand 4

I know all of you have been waiting with baited breathe for my first contest. Well we are taking the plunge together. Here is the chance for all of you to win something for doing almost nothing. Hopefully you won't think this Contest is full of Sh-t . For many many years I have had the "nickname," I guess you could call it, of Cman. Here lately, probably due in part to #10 in my 10 Reasons John Chow Probably Thinks This Blog Is About Him article, I have been getting asked more and more what the C in Cman stands for. Herein lays the focus of this contest. For the person who can guess what the C in Cman stands for I will give them $100. If multiple people guess correctly the winner will be chosen by random drawing from among the correct entries. If no one guesses correctly I will randomly pick from all entries and will award the winner of the losers $20. Clarification: 1. In the words of Juan Sanchez Villa-Lobos Ramirez, "There can be only One." Winner that is. E...
35 comments
Read more

Give Viral Marketing A Chance !

==== Copy and Paste below this line ==== Instructions: Important Update - Please read here ! 1.) Copy and paste (for those of you using blogger post in the compose tab, not the edit html tab, of your post editor) the matrix of “ViralTags” below courtesy of Founders Cafe ( to support Jimmy’s quest of launching his own Internet Startup with a shoestring budget, please consider subscribing to his Full RSS Feed to see his triumphs and struggles in real time ). 2.) Substitute the Host Tag and one of the “Viral Tags” in the matrix with your anchor text of choice with your blog’s URL. Please keep anchor text to a max of 3 words to keep the matrix size manageable. 3.) When you get a ping back from someone that has your link in one of their “Viral Tags”, practice good karma by copying his/her Host Tag’s anchor text (automatically the associated link will also be copied) and paste it over one of your “Viral Tags” below. 4.) Encourage and invite your readers to do the same and soon this ...
31 comments
Read more

The Stripping Aristologist Contest Winner

Well as you can see from the above screen capture the winning entry is #5. Heading over to the contest post and looking through the comments and the trackbacks I found that Anton of Link Right Contests was entry #5 with his guess of Julia Child. The actual answer was incorrect so he won the $50 but not the bonus prize. I was a bit generous to 2 entries that commented and entered but did not give the link. I had to search their blog to find the answer. There were several that commented and gave a link to their blog but I could not find a post about the contest or any links back to this blog. Anywho....Congrats to Anton and thank you all so much for reading and taking the time to interact with this blog and really make it what it is. Oh and Anton you might want to consider some kind of Contact Me link for your blog. Other than trackback to your post and a comment I have no way to contact you regarding your winning entry. Having a Contact Me is one of the first things any blogger should ...
9 comments
Read more