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 https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgq6iFC9bv8tnbN0KzSiXPvw8yCNFYxqWOaPaGa4J-2ICAY8Vd8ST7uWb8NLbCH1e6gNRnLM8TuR9IamOBBwsIY9aCNVi-xH5wBp-WzI15jk1W57MGtPvEj5WO9wesZrTwyyIWnjWDeJbY//

6- I hope this tutorial was helpful and have a look around, there are many other great tutorials to customize your blog. Description: Blogspot How to: Add Image as Sidebar Background Rating: 4.5 Reviewer: Unknown - ItemReviewed: Blogspot How to: Add Image as Sidebar Background Hot News!!! "Sepeda Motor Injeksi Irit Harga Terbaik Cuma Honda"