How To Add A Background Image To Your Blogger Sidebars




| 5 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.


Join over 5000 Subscribers! Please sign up to receive Updates.

SUYB has its Focus on Quality. If we post Crap, you can unsubscribe.

No Spam and No Garbage! - Use RSS, Twitter & Facebook as an Alternative


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

5 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
  5. Didn't even find this one: #side-wrapper { .... Help Me Paul, please....... :'(

    ReplyDelete



Important - If you ask a question make sure you tick the "Notify Me" box below the comment form to be notified of follow up comments and replies.


Hire Us