Blogspot How to: Add Image as Sidebar Background

Some time ago I posted an article How to Add Image as Sidebar Background Heading Similarly you can also add an image in the whole sidebar. Just follow these simple steps and if you feel any difficulty at any step, feel free to ask:

1- On your Blogger Dashboard, go to "Edit Layout" and then "Edit HTML" section.

Remember: Before doing any changes to your blog, always backup your template by clicking the "Download Full Template" link.

2- Now, find the following code...


#sidebar-wrapper {
width: 220px;
float: $endSide;
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 */
}


Info: Actually this code is defining the appearance of your sidebar.

3- Add some more style definitions in the above code and your code will become like this...



#sidebar-wrapper {
width: 220px;
float: $endSide;
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 */
background-image:url('URL of uploaded image here');
background-repeat: repeat;
background-attachment: scroll;
background-position: right top;}
}

As you can see that the green code is representing newly added text and the red code is to be replaced by the image URL.

4- Don't change any setting in the above code except URL of uploaded image here which will be replaced by the uploaded image.

5- After adding your own image, first see the preview and then save the template if you're happy.

Tip: You can get free professional patterns at http://www.dinpattern.com/

Tip: When I was writing this tutorial, I downloaded this pattern from here. It's size was 42x36 and it weighed only 1.50 kb. You can also try it, the URL is http://4.bp.blogspot.com/_wa6zL1GRiOs/SkPPZhLM1mI/AAAAAAAADEI/xN8nFwaV-P4/echeveria.gif

6- I hope this tutorial was helpful and have a look around, there are many other great tutorials to customize your blog.

25 comments:

  1. Thanks - works great! I'd really like my main column and sidebar to be a color (solid) and the background image a repeating image. I got the background image to load (thanks), but now the whole thing's that image. How do I get my columns (where the text is) to be a solid color?

    ReplyDelete
  2. @ Sunshine, please gimme your blog address where you want to apply solid color background. I'll give you exact code which you need to apply!

    ReplyDelete
  3. Thanks, Bilal! I finally swam around in the code and answers enough to find a combo that worked. :)

    www.teachboosters.blogspot.com
    www.the-modern-housewife.blogspot.com

    ReplyDelete
  4. @ Sunshine, so do you still need help or have you done what you wanted to do???

    ReplyDelete
  5. Hello :)

    I have seen the tutorial for the sidebar background changing to a image. That's cool. Thanks.

    HOW do I change the background of the OTHER (left) column. Very specifically the posts background. But behind any text would be great.

    Please help!

    DRH

    ReplyDelete
  6. Hi :)

    HOW do I "control" the background upon which every item is situated?

    Beyond making the left column have a single background color or image, can I control the backgrounds individually?

    The effect would be as I slide the content over the page background, there will be desired little spaces between each item, through which we can see the page background.

    Thanks,

    DRH

    ReplyDelete
  7. Nice post . Good job. I like the way you colored the codes.

    ReplyDelete
  8. Help! Trying to place an image as a background to my sidebar, but cannot find any html relating to sidebar apperance, i.e. cannot find
    " #sidebar-wrapper "

    Any ideas ?

    ReplyDelete
  9. This comment has been removed by the author.

    ReplyDelete
  10. @ stolenbikecardiff, find the following code and then place the image code inside it:

    .main-inner .column-right-outer {
    width: 260px;
    margin-right: -260px;
    }


    and after adding the image code. it will look like this:

    .main-inner .column-right-outer {
    width: 260px;
    margin-right: -260px;
    background-image:url('URL of uploaded image here');
    background-repeat: repeat;
    background-attachment: scroll;
    background-position: right top;}
    }


    hope it helps :)

    ReplyDelete
  11. I can't find the code . Whyy yaa ?

    ReplyDelete
  12. @ Anne, gimme the address of your blog!

    ReplyDelete
  13. Ok, I started by adding it into CSS form in Design Template. That didn't work so I went through the code, and it's correct, yet the image still isn't showing up? I don't think it's my host, as the same host works for page background and bar image. All that will show currently is the color. I even tried changing that to transparent to see if that would help, nada. Any ideas?

    ~K
    bigklittlea.blogspot.com
    bigklittlea@gmail.com

    ReplyDelete
  14. @ K, ok I'll write a new tutorial for you!

    ReplyDelete
  15. This comment has been removed by the author.

    ReplyDelete
  16. I cannot find the right code, please help me my blog is at PurpleOvenMitts.blogspot.com and the url of the picture I want in the sidebar is https://lh6.googleusercontent.com/-JBOtUsTIJZo/Tx3FfDAY5WI/AAAAAAAAAAk/yG87JyMWToY/s512/PERSIAN-d.jpg

    ReplyDelete
    Replies
    1. @ Kim, please write some posts and then ask for help.

      Delete
  17. Thanks!! It works well on my blog!! :)

    ReplyDelete
  18. I can't seem to find the code in my edit html box even when I expand widget templates

    ReplyDelete
    Replies
    1. Hi Sher, this is an outdated tutorial. Please email me your template file with your question, I'll try to help :)

      levisinside0@gmail.com

      Delete
  19. Hi I didn't get above code while searching. What may be the reason for that?
    Can you give me some idea

    ReplyDelete
    Replies
    1. Hi Ajeet, sorry I've no idea. What is your blog address?

      Delete
  20. Bilal, First of all thank you for the great tutorial, it really helped me. I know that this is an outdated tutorial but I was hoping that you could answer a question for me. How do I get the image to extend the full length of my blog? Right now it is only showing behind inserted gadgets. I want it to continue to the bottom of the page.

    Thank you again,
    Robin
    <a href="http://www.flusterbuster.com>Fluster Buster</a>

    ReplyDelete
    Replies
    1. Hi Robin, thanks for your kind words. Please email me your template file and I'll see if this can be fixed.

      levisinside0@gmail.com


      Regards,
      Bilal

      Delete

Note: All comments will be moderated.