How To Add A Background Image To Your Blogger Sidebars


| | 4 comments

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.


If You Enjoyed This Post Please Take 5 Seconds To Share It.

Stay Connected With Free Updates

Subscribe via Email

4 comments:

  1. Hello Paul. I dont find this #side-wrapper { ! Really i checked properly ! Please help me. Thank you !

    ReplyDelete
  2. Thanx a lot :)... a had been struggling with this problem for around 2-3 hrs.. Ur post rlly helped me out. It works properly...:)

    ReplyDelete
  3. hiii #side-wrapper is not there in my html..

    ReplyDelete
  4. hey.. m using the futureX template on blogger.. can u help me stretch the size of main blog article.. i want to remove the right side-bar.. plz help

    ReplyDelete



Important - Make sure to click the "Subscribe By Email" link below the comment for to be notified of follow up comments and replies.If you use Name/URL don't use keywords as your name (You Know Who You Are).