Add a Background Image to Gadgets in Blogger ~ Shwenagar

Making your blog beautiful means adding some eye catching images on the layout and gadget is one of the place where you may want to use a background image to spice up the look.
Not every Blogger is a web designer and it could be difficult for a person not familiar with basic web designing to give styles to pages in coding level and that can be an obstacle for a blogger to design their blog on their own.

Coming to the topic, if you want a background image on your gadgets to make it look beautiful but can't find any option in the template designer provided by Blogger then you are at the right place.

Adding a background image to an element on a web page is a single line code for us but it can be fascinating to those who are new to it and it's you ! You can experiment how it works and play with it and learn some basic web designing too.

Background Image for Gadgets

The actual reason behind writing this post is not to explain how to use the background image CSS property but to make you familiar with CSS selectors. A selector in a rule is the most important thing to tell the browser to apply those styles to which element on the page. People can learn CSS easily but if you don't know about FireBug or Chrome Developer Tools then you can't practical play with the CSS.

I would suggest you to read these articles :
CSS Selectors - https://developer.mozilla.org/en-US/docs/CSS/Writing_Efficient_CSS
Using Chrome Developer Tools - http://www.stramaxon.com/2012/07/how-to-use-chrome-developer-tools.html

The CSS

To add a background image to a gadget in Blogger, we first need to know what selector we should use to apply the styles. You can do it by using the Chrome Developer Tools (Google Chrome only). But you can use this selector in most of the templates on Blogger.

1	`.sidebar .widget {}`

(This is just the selector). We have put .sidebar because we just want to apply the style only to the .widget element inside the sidebar, it's important because blog post area is also wrapped in a .widget class, and if we only use this class selector it will select every widgets including the blog post area.

The code we need to apply a simple good background image on a gadget is this :

.sidebar .widget {

background-image:url('http://image.com/background.png');

background-repeat:repeat;

}

Background Image : If you apply this code on your blog then it will point to a image that doesn't even exist (not yet) so it's simple that first step is to upload your background image in a supported format online and then replace http://image.com/background.png with your image's link.

Background Repeat : CSS is a human readable language and you may have already understand what this does. It controls whether your background image should be repeated to cover up the area or not. There are two more variant for this property that controls the background repeat for x and y axis.

It's better to repeat your background images unless you want it to be a single complete background picture, in that case you should change repeat to no-repeat.

If you don't know how to apply CSS on your Blog then check this old article
http://stramaxon.blogspot.com/2012/03/how-to-add-css-to-your-blogger-blog.html