How to Add Image as Blog Background

We can easily add a background image in a Blogger/Blogspot blog. To add an image as your blog background, first of all you need to do 3 things:

1- Select an image.
2- Upload it.
3- Add it to your blog HTML.

1- Select an Image

This is a fairly simple thing, you can either chose an image wallpaper from your computer or web. Of course, if you're selecting a full wallpaper then it will be quite heavy in size and eventually your blog will take too much time to load.

I recommend you to use a pattern instead of a large image. A pattern is also an image but it has a very small size and it is repeated in the blog background. We can use it to cover whole background through a CSS background property which will be explained later.

Tip: Go to Din Patterns to download high quality patterns for your blog background.

2- Upload it

I assume that you've already selected an image or a pattern and now we need to upload it on some image host. Fortunately, Blogger provides each user 1Gb free space to store images which is more than enough, so just upload your image on Blogger and then come back.

How to Host Images on Blogger

3- Add it to your blog HTML

I'm assuming that now you've completed the previous two steps and we're ready to move on. Now, you need to follow these simple steps to complete this tutorial:

1- Go to Design -> Edit HTML and find:

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

You might not be able to find the exact above code but you'll definitely find some code of this form:

body {
.
.
.
Some Code Here
.
.
.
}

2- Once you've found the above mentioned code, you need to add following code in it:

background-image:url(URL of your image from step 2);
background-repeat: repeat;
background-attachment: fixed;

Please note that this code is only for adding a pattern, if you're adding a large image, please see the heading Aligning Background Image later in this tutorial otherwise continue from here. After adding the code mentioned in Step 2, overall code should look something like this:

body {
background:$bgcolor;
margin:0;
color:$textcolor;
font:x-small Georgia Serif;
font-size/* */:/**/small;
font-size: /**/small;
text-align: center;
background-image:url(URL of your image from step 2);
background-repeat:repeat;
background-attachment: fixed;
}

3- Replace URL of your image from step 2 with your uploaded image URL which you uploaded above in this tutorial.

4- You can also try changing background-attachment: fixed; to background-attachment: scroll;. This way, your background will also move when you scroll your blog but I won't recommend doing this.

Aligning Background Image

If you've added a background image (not pattern) then it's very important to align it correctly. Here is the code to add an image in the background:

background-image:url(URL of your image from step 2);
background-repeat: no-repeat;
background-attachment: fixed;
background-position: left top;

Overall, the code should look something like this:

body {
background:$bgcolor;
margin:0;
color:$textcolor;
font:x-small Georgia Serif;
font-size/* */:/**/small;
font-size: /**/small;
text-align: center;
background-image:url(URL of your image from step 2);
background-repeat: no-repeat;
background-attachment: fixed;
background-position: left top;
}

As you can see, I've changed the code a bit by changing repeat to no-repeat and also adding Background Position property. The no-repeat will make sure that our image doesn't repeat itself. The Background Position property has 2 parameters which define horizontal and vertical positioning of an image. In the above code, horizontal position is left and vertical position is Top so our image will be placed according to these parameters. Here is a list of possible parameters of Background Position property.

background-position: left top;
background-position: left center;
background-position: left bottom;

background-position: right top;
background-position: right center;
background-position: right bottom;

background-position: center top;
background-position: center center;
background-position: center bottom;

Final Thoughts

People love personalizing their blogs and adding an image in blog background surely adds more personalization in a blog. This is the most famous tutorial on Beta Templates and I'm thankful to you guys for that.