Adding background image : How to add a background image to your blog?
By blog
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
- 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. - 2 years 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. - 2 years 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. - 2 years ago
- Blogger Navbar: What Is Blogger Navbar And It's Advantages and Disadvantages
Blogger Navbar appears at the top of every blogger by default. - 2 years 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. - 2 years 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. - 2 years 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. - 2 years ago
- Blogger Falling Rectangles : How to Add Falling Rectangles to Blogger?
You can add falling objects like small rectangles, circles, stars etc. - 2 years ago
rancidTaste's Recent Pages
- Drawing a line: How to draw a line using HTML 5?
HTML5 canvas API provides basics tools and great supports to draw and style different types of sub paths including lines, arcs, Quadratic curves, and Bezier curves, as well as a means for creating paths by connecting sub paths. - 14 hours ago
- SEO Pages
SEO, Search Engine Optimization and Keywords - these common three terms are the brainstorming terms for any content publisher, seo company, seo service provider, seo researcher, seo firm, seo consultant, seo professional or other seo lover. - 3 months ago
- WordPress.org vs. WordPress.com: An explained comparison between WordPress.org an WordPress.com
WordPress is a common name but do you know that there are two things: WordPress. - 3 months ago
- Creating database from cpanel: How to create a database from cpanel hosting?
A step by step full tutorial to create a database from cpanel hosting account for any dynamic website. - 3 months ago
- Natural Join in Database: Retrieving records from more than one table with Natural Joins
Natural Join is one of the sql joining. - 3 months ago
- Explanation of SQL Join: Obtaining data from multiple tables using Join
Explanation of SQL Join: Obtaining data from multiple tables using Join. - 3 months ago
- How to solve "CreateFile error 32 when trying set file time" Error During Oracle Installation
Solution of the Oracle installation problem on Windows 7 / Windows XP during Oracle installation start-up. - 3 months ago
- A Brief Explanation of SQL Statements and Classification
Any type of database is based on several statements. - 3 months ago
Comments
No comments yet.