**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://bp0.blogger.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.
