In terms of customization the options that Blogger provides might be limited but with custom styles and codes you can do almost anything to the looks of your blog. With this tutorial you will learn how you can set background images to the widgets in the sidebar or anywhere.
Upgrade your blog's look by setting custom images (your choice!) as the background on widgets on your blog. We will guide you through setting background images on widgets on your blog, either on sidebar & footer or just the sidebar.
For example I have this image:
Make sure your image wide enough to cover the width of the image, as for the height you may also keep it in accordance with height of the widgets but it is not in this case useful as some widgets might stretch more vertical which may require the image to be stretched too, but instead of stretching we can just tile it downward to fill in the blank area.
Replace Image URL:
The third line is basically the one you have to change. Currently the image pointed in the code is what I have set it, but for your images you have to enter your image's URL in the snippet.
The highlighted area in the code is the URL of the background image, when you copy the code replace the highlighted area with your own image's URL and then apply the whole CSS code to your blog.
Don't Apply To Footer Widgets:
In case you intend to only apply the background image to sidebar widgets then omit the following piece of highlighted code from the snippet:
Do not remove the "{", only the highlighted area is supposed to be removed.
Moreover you can always select your own decorative background image from around the web or look at some very creative designs on Creative Market that you might find useful.
So have a great Christmas and happy new year! See you in 2016.
Upgrade your blog's look by setting custom images (your choice!) as the background on widgets on your blog. We will guide you through setting background images on widgets on your blog, either on sidebar & footer or just the sidebar.
Before you make changes to the template I recommend you to take a backup of your blog template.
Set Background Image On All Widgets
If you want a image background on all of the widgets on your blog then follow the instructions below, the other section deals with adding a background image to particular widget(s) which goes a bit into technical stuffs.First Get An Image
Before anything else we need an image somewhere on the web that you can use as the background. Simplest way is to upload an image in a draft post on Blogger, then right click on it to get its direct URL.For example I have this image:
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgBfB2nyePmGVWA371Blpb9Noc_Dr-cVF21w81Go6f2X4pS-OeP06qg4VA0O0sBoVPRwnr6MnBSTZuVtLxMe7-metADz_Diopzz_SnjkFbJqhFTsbys3jCut_vKi0pa2uUqvQVKLFi78feF/s1600/samle-image-001.jpg
Make sure your image wide enough to cover the width of the image, as for the height you may also keep it in accordance with height of the widgets but it is not in this case useful as some widgets might stretch more vertical which may require the image to be stretched too, but instead of stretching we can just tile it downward to fill in the blank area.
The CSS Snippet
To get the image applied as background we would use this small snippet that sets the image on every widget (including the widgets in footer, you can omit the line specified if you don't want it on footer).sidebar .widget .widget-content
,foooter .widget .widget-content {
background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgBfB2nyePmGVWA371Blpb9Noc_Dr-cVF21w81Go6f2X4pS-OeP06qg4VA0O0sBoVPRwnr6MnBSTZuVtLxMe7-metADz_Diopzz_SnjkFbJqhFTsbys3jCut_vKi0pa2uUqvQVKLFi78feF/s1600/samle-image-001.jpg');
background-repeat: no-repeat repeat;
background-position: top center;
background-size: cover;
}
Replace Image URL:
The third line is basically the one you have to change. Currently the image pointed in the code is what I have set it, but for your images you have to enter your image's URL in the snippet.
background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgBfB2nyePmGVWA371Blpb9Noc_Dr-cVF21w81Go6f2X4pS-OeP06qg4VA0O0sBoVPRwnr6MnBSTZuVtLxMe7-metADz_Diopzz_SnjkFbJqhFTsbys3jCut_vKi0pa2uUqvQVKLFi78feF/s1600/samle-image-001.jpg');
The highlighted area in the code is the URL of the background image, when you copy the code replace the highlighted area with your own image's URL and then apply the whole CSS code to your blog.
Don't Apply To Footer Widgets:
In case you intend to only apply the background image to sidebar widgets then omit the following piece of highlighted code from the snippet:
,foooter .widget .widget-content {
Do not remove the "{", only the highlighted area is supposed to be removed.
Now Apply The CSS
Here is a quick tutorial on adding CSS code to your Blogger blog with easy demo stepsDecorative Backgrounds for Holidays
Christmas and New Year's Eve is near, everything on the web has almost blended into the festive look so why not your blog? Use the steps provided above with these pre-made images that will give your blog an impressive look. Just right-click, copy the image URL and use it with the code in the previous section.Moreover you can always select your own decorative background image from around the web or look at some very creative designs on Creative Market that you might find useful.
So have a great Christmas and happy new year! See you in 2016.
