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