Add Background Images to Blogger

Today we will learn how to add background images to Blogger. Instead of just having background color to your blog, you can add images to it. You can use any image formats and any size to make your blog look beautiful and also can achieve a style with the same layout that others are using too.

Before we start, we need to know some extra styling properties that will come handy. So let’s start with the tutorial.

Repeat of Images in Background

You can actually use a small image which can be repeated throughout your blog's background. Let’s see with an example by taking a 50x50 pixel image.

By default, if we don’t mention any repeat property, then the background-image is repeated both vertically and horizontally.

body {
background: url(http://image.jpg);
}

If we want the image to be repeated only horizontally, then we have to use repeat-x property.

body {
background: ur(http://image.jpg) repeat-x;
}

And if we need to repeat it vertically, then we have to use repeat-y.

body {
background: ur(http://image.jpg) repeat-y;
}

At last, if we don’t want the image to get repeated, we should use no-repeat.

body {
background: ur(http://image.jpg) no-repeat;
}

Positioning the Background Image

When you add an image without declaring the position of the image, it will normally start from the top-left corner of the browser. Generally, while using small image which we want to repeat, it doesn’t need any position declaration. But when we use a large image to Blogger background, we need to declare this property. Here’s a list:

• center center
• top center
• bottom center
• top left
• center left
• bottom left
• top right
• center right
• bottom right

So if we want to have the image to start from top center position, then we should use:

body {
background: ur(http://image.jpg) repeat-y top center;
}

Add Background Image to Blogger

Log in to Blogger and go to Design > Edit HTML tab. To add the image as Blogger background, we have to find for body definition. This would normally be:

body {
background: $bgcolor;
margin:0;
color:$textcolor;
font:x-small Arial sans-serif;
font-size/* */:/**/small;
font-size: /**/small;
text-align: center;
}

See the bold codes, we need to change this property to ours to add the image. So first upload your image, copy its direct URL to clipboard and replace "http://www.your-hosted-image" with yours.

If you want to have the image to repeat seamlessly throughout the blog, then replace it with:

background: url("http://www.your-hosted-image.com/");

If you want it to repeat vertically, then you have to add repeat-y property to it as shown below:

background: url(“http://www.your-hosted-image”) repeat-y;

And for horizontally:

background: url(“http://www.your-hosted-image”) repeat-x;

At last, save your template.

Adding Big (Wallpaper) Size Background Image

If you are planning to add a wallpaper sized image to blogger background image, we have to use the property of no-repeat as we don’t want the image to be repeated across the browser. So here we have to replace the background to:

background: url("http://www.your-hosted-image") no-repeat top center;

Note that "top center" property is used to position the background image.

Adding Fixed Background Image

Some of you may want to have a fixed image to the background. Fixed image means that the image will remain fixed when the browser window is scrolled. For this you have to add the position property “fixed”.

background: url("http://www.your-hosted-image") no-repeat top center fixed;

So here you can see

that while your blog is scrolled

your background image of your blog

remains fixed.

Now all is left is to add a background color to blogger so that it matches with the color of the image that you are using as background. So the code will look like:

background:#000000 url("http://www.your-hosted-image") no-repeat top center fixed;

Note the hex value. All you have to do is change it that would actually match with the image’s color.

Reference: W3 school CSS background

Adding Background Image to Blogger's New Template Designer

For new template designer, the above process is almost same except for some templates as it uses some CSS3 properties, which we have to be deleted to view the images properly. However Blogger has updated the template designer so that you can upload your own images and can align it without going through any HTML tutorials. All you have to do is go to Design > Template Designer > Background, click on Background Image, and start uploading your image.

After uploading, the alignment of the images are same as told above but you don't have to edit your template also as it has been made easy.

Now all is left is to setup a test blog and try it.