How To Make Your Blog Header Background Transparent

When I did my blog redesign and imported a new template, I wanted to give it my own personal touch. I loved my new template design but loathed the big yellow header box. I knew there was a way to maniuplate the HTML in order to make the background transparent to show the image I had added to my blog body background. Thanks to Vin of Beta Blogger for Dummies and the Blogger support group I was able to find the direction I needed. By no means am I advanced at HTML - so here it is in layman's terms!

**It is alway best to dowload a copy of your full template to your computer before making changes to the HTML**

Also, you can select "Preview" to view edits as you make them before "Saving".

Navigate to the following area when editing your blog --> Layout Tab ---> Edit HTML Sub Tab

How to add a new image to your blog body background:
1. Decide on an image you would like to use
2. Add the following code before your: body {
** For what ever reason I am unaware - I had to import this code as an image for you to see as it was not showing up when I typed it in here...

3. Add the following code or change the code to your selected image here: (You will be changing the whole url string in background: to source your own image you are going to use.)

body {
background:#fff url("http://1.bp.blogspot.com/YOUR IMAGE GOES IN THIS SECTION.jpg") no-repeat $endSide bottom;
background-attachment:fixed;
margin:0;
padding:0;
color:$textcolor;
font:x-small Georgia Serif;
font-size/* */:/**/small; font-size: /**/small;
text-align: center;
}

Now that you have done that it is time to make the back ground header transparent so that you can see your blog body image through it.

4. Find the /* Header section in the HTML of your blog

5. Find the header-wrapper section and add the following code for "Opacity". The opacity, filter and -moz-opacity lines must match. So, if you change the opacity to .950 - then you have to change the filter to opacity=95 and the -moz-opacity to .950. I found that .850 gives the blog a great transparency without loosing the ability to read the text.

#header-wrapper {
background-color: #FFFFFF;
opacity:.850;
filter: alpha(opacity=85);
-moz-opacity: 0.850;
width:925px;
margin:15auto 10px;
}

6. Now you need to add the opacity to your outer-wrapper as well. Let's find the section under the outer-wrapper called main-wrapper and make the following additions to the code.

#main-wrapper {
background-color: #FFFFFF;
opacity:.850;
filter: alpha(opacity=85);
-moz-opacity: 0.850;
width: 450px;
float: left;
padding: 0;
margin-right: 10px;
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 */
}

7. You must also change your side bar wrappers adding the opacity code as follows. Find the section sidebar-wrapper and add the code.

#sidebar-wrapper {
opacity:.850;
filter: alpha(opacity=85);
-moz-opacity: 0.850;
width: 220px;
float: right;
background: $sidebar2bgcolor;
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 */
}

8. Depending on your blog layout - you may have multiple sidebars - in that case you need to edit each one and add the opacity code as follows in this example:

#right-sidebar-wrapper {
background-color: #FFFFFF;
opacity:.850;
filter: alpha(opacity=85);
-moz-opacity: 0.850;
width: 220px;
float: right;
padding: 0px;
background: $sidebar1bgcolor;
margin-right: 15px;
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 */
}

Hopefully this has helped anyone that was getting a bit stuck on how to make these changes. Feel free to email me with any questions or if you need additional help - I will help if I can! I will be adding more tips in the future, so keep checking back!