In this post i will show you how to use a background image behind your sidebars in your blogger blog.Adding the background image is very simple and just requires a small piece of code.
This is part 2 of 3 on adding background images to your blog recently i posted:
1. How To Use A Background Image For Your Blog
2. How To Add A Background Image Behind Your Blogger Posts
First you will have to select the image you want to use.
You can find images on image hosting sites like Photobucket.
The code is set to tile/repeat the image across the background so a small decorative image will do.
Once you choose the image here’s how to add it:
1.Click ‘Layout’–.’Edit Html’ For your blog
2.Find the following piece of code in your blogs html
(Use ‘CTRL F’ for a search bar to find the code)
#sidebar-wrapper {
If you cant find that code it may be:
#side-wrapper {
You will see ‘#sidebar-wrapper’followed by code similar to this :
#side-wrapper {
float: left;
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
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 */
}
3. Now add the following piece of code Directly Below #side-wrapper {
background:url(PUT IMAGE URL HERE) repeat top right;
/* background-attachment: fixed; */
| We Are Nearly Finished: If you need more help or have an opinion or suggestion Please leave a comment Below.This is a Do-Follow Blog . |
4.Replace the text ‘PUT IMAGE URL HERE’ above with the URL of your image.
Example:
#side-wrapper {
background:url(http://i941.photobucket.com/albums/ad259/spiceupyourblog/bloggerbackground.jpg) repeat top right;
/* background-attachment: fixed; */
float: left;
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
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 */
}
5.Now click save and your Background image is added to your blog.
Were you able to add an image ? Let me know how you did.
