Adding background image : How to add a background image to your blog?
79If 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
- Hover Peek-a-boo Blogger Navbar: How to Hide Blogger Navbar and Make It Visible When You Place the Mouse Cursor on It?
The Blogger Navbar appears by default at the top of every Blogger-powered blog. - 6 months ago
- Remove or Hide the Blogger Navbar: How to Remove or Hide Blogger Navbar?
The Blogger Navbar appears by default at the top of every Blogger-powered blog. - 6 months ago
- Change the Color of Blogger Navbar: How to Change the Color of Blogger Navbar?
The Blogger Navbar appears by default at the top of every Blogger-powered blog. - 6 months ago
- Blogger Navbar: What Is Blogger Navbar And It's Advantages and Disadvantages
Blogger Navbar appears at the top of every blogger by default. - 6 months ago
- Adding "Top of Page" Icon Link: How to Add "Top of Page" Icon Link on Your Blog or Website
Many of the websites or blogs posts have a small text or image floating at the bottom-right or bottom-left or bottom-center. - 6 months ago
- Adding "Top of Page" Text Link: How to Add "Top of Page" Text Link on Your Blog or Website
Many of the websites or blogs posts have a small text or image floating at the bottom-right or bottom-left or bottom-center. - 6 months ago
- Adding Signature to Blogger Posts: How to Add a Signature under Your Blogger Posts?
You can easily add your own custom signature to your blogger posts. - 6 months ago
- Blogger Falling Rectangles : How to Add Falling Rectangles to Blogger?
You can add falling objects like small rectangles, circles, stars etc. - 6 months ago
rancidTaste's Recent Pages
- New Interface of Google Search: Try Google Search's New Interface Now!!
Google Search is always favourite to all from the starting of Google search. - 3 weeks ago
- Fresh and unique contents for Search Engine Optimization: The secret talks of SEO and generating site contents
Millions of websites with billions of webpages are available in the cyberspace. - 6 weeks ago
- Free malware protection with Portable Anti Trojan Elite: The best malware blocker and malware remover for your compter
Recently malware is spreading very rapidly. - 6 weeks ago
- rundll32.exe - Application Error â The memory could not be "read". Click on OK to terminate the program.
Windows operating system is corrupted due to several virus infections. - 2 months ago
- PPV or PPC?: "Pay Per View or Pay Per Click?" - Which One is Better?
Pay per view (PPV) and pay per click (PPC) are two types of marketing advertising solutions which is used by the advertisers to reach targeted group of visitors. - 2 months ago
- Make Good Money with Good Articles and Get Quick Cash
Before going to the main content, I want to ask you tow question? - 2 months ago
- Hot Secrets Behind Good Articles: How and Why Good Writers Always Write Good Articles?
Before writing to Hubpages, I have no idea about good articles. - 2 months ago
- Backlinks And Backlinking: Search Engine Optimization and the Importance of Backlinks And Backlinking
If you do a small research on search engine optimization or high search engine ranking, then you must come across the term backlinks or backlinking. - 2 months ago
PrintShare it! — Rate it: up down flag this hub



