Flag This Hub

Adding background image : How to add a background image to your blog?

By


If there is an image to the background of your blog, your blog looks much gorgeous than others blog. To add image to the blog's background, firstly you have to choose an image and then host the image and finally add the image url to the blog's template code. It's very easy to add an image of the background of the blog. We have to work only background tag. We just append the url() tag to it. This page contains the detail information to add an image to any blogspot template.

Steps to add a background image to your blog

Follow the following steps to add a background image to your blog:

Step 1: Select a background image for your blog

At first, you have to select an image to use it for your blog's background. You may create a background image by yourself or can find background image from Google. There are lots of sites available which provide free background image. Search Google by the words tileable backgrounds images to find the background image. Alternately, Click here to find lots of background image.

Step 2: Host the image to any free image hosting site

To add any image to your blog background, you must have to host that image to any site. There are lots of free image hosting sites which is absolutely free to host images. You may host your desire image to tinypic, photobucket etc.

Step 3: Go to blogspot template's edit code

Log in to your blog and form the Dashboard click the Layout of the blog which you want to add image to the background. From the Layout, select Edit HTML and then expand the widget code. For details, How to find and edit blogspot template code?

Step 4: Find the code segment of body

Form the template code, find the following code segment:

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

Look the second line of the code segment. The line is started by the tag background. By modifying this line you can change the color of your blog template or add an image to your blog template. So, to add an image, we must have to modify only this line. So, you have to search this code segment before modifying the line.

Step 5: Modifying and adding image to the blog template code

Previously, I mentioned that you need to host an image to add it to the background. For example, we want to add the image to the right-hand side image to our template. This image is hosted http://i43.tinypic.com/2njljjm.jpg. [N.B. You can also use that image to your blog's background].

Now, you only need to chage of the second line of the previous code segment [code segment of step 4]. So, we need to change it. We just add an url() tag beside the background tag. So, the code segment looks like the following:

background:$bgcolor url(http://i43.tinypic.com/2njljjm.jpg);

From the above code, you can see that we only need to add the url () tag to add the image location of the background image. By using the above code line, the total code block of Minima looks like the following:

body{
  background:$bgcolor url(http://i43.tinypic.com/2njljjm.jpg);
  margin:0;
  color:$textcolor;
  font:x-small Georgia Serif;
  font-size/* */:/**/small;
  font-size: /**/small;
  text-align: center;
}

Step 6: Save the code of your blog template

After finishing the above steps, you need to save your work. If you don't save, the image will not be added behind the background of your blog. So, you have to save it. There is a button Save Template at the end of the page. Click Save Template button to save the code.

By following the above steps, you can easily add any image to your blog background. If you have any difficulties you may tell your problems, in the comment section.

Live view:

By following the above mentioned steps, one blog's background is replaced by an image. To see the blog, click here.

© This tutorial is written by Blog.

For more blogspot tutorials, visit http://hubpages.com/hub/blog-index

blog's Recent Pages

rancidTaste's Recent Pages

Comments

No comments yet.

Submit a Comment
Members and Guests

Sign in or sign up and post using a hubpages account.



    Like this Hub?
    Please wait working