How To Use A Background Image For Your Blog

In this post i will show you how to have an image as the background of your blog.Adding the image is easy and can be completed in a few steps.

This is part 1 of 3 on adding background images to your blog recently i posted:

1.How To Add A Background Image To Your Blogger Sidebars

2.How To Add A Background Image Behind Your Blogger Posts

First you must find the image you want as your background you can find images on image hosting sites like Photobucket of do a Google image search.

You can find/create an image big enough to cover the entire background of your blog.

Most people will just find a small image that will repeat across the background i have set the code to accommodate both.



Once you have your image here's how to add it :

1.Click 'Layout' -->'Edit Html' for your blog

2.Find the following piece of code in your blogs html:
(Click 'ctrl F' for a search box to find the code)

body {

You will see 'body {' followed by code similar to this:

body {
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
text-align: center;
color: $textColor;
font-family: arial,verdana,helvetica,tahoma,Sans-serif;
font-size: 100%;
width: 100%;
}

3.Add the following piece of code Directly Below body {

background:url(PUT IMAGE URL HERE) repeat top right;
/* background-attachment: fixed; */

4.Replace the text 'PUT IMAGE URL HERE' above with the URL of your image

We Are Nearly Finished - : If you need more help or have an opinion or suggestion Please leave a comment Below.This is a Do-Follow Blog.

Example:

body {
background:url(http://i941.photobucket.com/albums/ad259/spiceupyourblog/bloggerbackground.jpg) repeat top right;
/* background-attachment: fixed; */
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
text-align: center;
color: $textColor;
font-family: arial,verdana,helvetica,tahoma,Sans-serif;
font-size: 100%;
width: 100%;
}

5.Click Save and you have your background image added.

Have you added a background image to your blog ?