.
Back to Top

0 How to Manage Blogger Background Colors, a Complete Guide

Sometimes Website or Blogger's default theme background doesn't work out well after some period of time. Even we get bored seeing same background interface again which we haven't created. Try giving your site an original look by choosing some exciting and professional backgrounds.

This tutorial will guide you to simply change the background colors using codes or default template settings.

There are different options available. Choose one which suits your template. 

1. Change background using Blogger’s default settings


Bloggers default background

Go to Blogger Dashboard > Customize > Background > Image
Use the default background and colors available. Blogger have updated their library with exciting backgrounds.

There is also an option to upload your custom image. Make sure it is of the minimum size 1280x800 pixels to fit properly on the screen without stretching.

2. Change the Color of the Post Background
Add below code lines in your Post's HTML view, Add your post content between and Save.

<div style="background-color: #CCCA66; padding: 5px 8px 5px 8px;">
Post Content here...
</div>
Color added to Post background


See here Live Demo

3. Background Image in a Blogger Post
Use same tags as in step 2 and use image url instead of color code. Use following codes in your post's HTML view.

<div style="background-image: url(your image htttp url here); background-repeat: no-repeat; ">
Post Content here...
</div>
Applied Image to Post background

See here Live Demo

4. Add background color to sidebar widget/gadget titles


background color to sidebar widget/gadget titles

Search for “]]></b:skin>” using Ctrl+F shortcut key.
Add below code before “]]></b:skin>”

.sidebar h2, .rsidebar h2, .lsidebar h2 {
    background:#000000;
    color: #FFFFFF;
    font-family: verdana,arial;
    font-size: 12px;
    font-weight: bold;
    height: 33px;
    margin: 0;
    padding: 3px 0 3px 7px;
    text-transform: uppercase;}

5. Add background image to sidebar gadget/widget titles
background image to sidebar gadget/widget titles

Add below code before “]]></b:skin>”

.sidebar h2, .rsidebar h2, .lsidebar h2 {
    background: url("http://i.imgur.com/tsSFF1j.jpg") no-repeat scroll 0 0 transparent;
    color: #FFFFFF;
    font-family: verdana,arial;
    font-size: 12px;
    font-weight: bold;
    height: 33px;
    margin: 0;
    padding: 3px 0 3px 7px;
    text-transform: uppercase;

6. Change Background of a Blog (For latest Blogger Templates)
Some blogger uses simple background color, if template using following code sets, do the highlighted changes.

Go to Template Edit HTML
Find body tag in template and change color as shown in highlighted lines.


Templates using Navbar-iframe for backgrounds

Change background color using hex color selector Click here

If you want to add image in this template, do following changes and add image url. 
(You Can use free image hosting sites such as imgur.com)

adding image link in navbar-iframe

If you have any question, please comment below, alternatively share us if you like the article.
Related Posts Plugin for WordPress, Blogger...

Zergnet