With this guide, you would be able to add a background image or
picture to your Blog, customize the position of your image, and have a
static background image that stays in place when you scroll through the
contents of your blog.
You will need to create an image. Find a
picture you like. If you need a free photo editing tool, you can either
search the net for one or use Google's
Photo Editing Software Picasa.
You can also use a small tile-size image which can be repeated so as
to cover the entire page. Try not to have an image file that is too
large as your page may take a little longer to load.
After creating a picture, you will need to upload it onto a free picture host. You can read about using free hosts like Google Page Creator and Google Groups. We have also a rather comprehensive list of free Image Hosts and File Hosting Services in our article on Manage Blogger Image Storage Space.
Check out those sites and choose one that is fast, reliable and
enables hotlinking to the uploaded files. Take note of the picture URL.
Next, log in to your dashboard layout; under Template -> Edit HTML, scroll to where you see this:-
body {
background:$bgcolor;
|
|---|
Change background colorIf
you would like to change the background color of your blog to a very
unique color, you can manually specify the color value. Search online
for color codes, or take a look at the HTML Color Chart
to see if you can find your desired color. For example, if you have
chosen a color code #B38481, change the above code to this:-
body {
background-color:#B38481;
|
|---|
If you are changing the background color of your sidebar only, add the color code under the relevant sidebar heading.
#sidebar-wrapper {
background-color:#B38481;
|
|---|
Similarly, if you want a different color for your main post column, add the color code as follows:-
#main-wrapper {
background-color:#B38481;
|
|---|
Note
that different templates may label their stylesheets differently. The
#sidebar-wrapper may be called #side-wrap or something to that effect.
In
some templates like the TicTac Template, the background color you see
is due to a background image and inserting a color code into the
template will not help. To have a different color, this background
image will have to be edited. For more details, read the article on Background Color of TicTac Template.
Add a background imageThe code to insert is this:-
body {
background-image: url(URL address of your image);
|
|---|
Remember to insert the
URL address of your image
in the brackets. If you would like to have a feel of how a background
picture will look like, I have uploaded a test image at this address –
http://i154.photobucket.com/albums/s255/ownlblog/narutosasuke1024x768.jpg
Insert the URL of this test image into the above brackets and Preview your blog.
You can also have a background image just for your sidebar. Locate the style and add the background image code accordingly.
#sidebar-wrapper {
background-image: url(URL address of your image);
|
|---|
For a background image to your main post body only, add the code here:-
#main-wrapper {
background-image: url(URL address of your image);
|
|---|
Repeat background imageBy
default, the image is repeated to fill up the entire background of the
page. If you have a small or tile-sized image, it will appear like a
print pattern in the background. Sometimes, you may choose not to have
the image repeated. If that is the case, you can insert this code:-
background-repeat: no-repeat;
|
|---|
Alternatively, you may only want the image to be repeated horizontally. The code is this:-
background-repeat: repeat-x;
|
|---|
To have the image repeated vertically, the code is this:-
background-repeat: repeat-y;
|
|---|
Position background imageIf
you have an image that is not repeated, you may like to specify the
exact position of this image on your page. The HTML code to be inserted
is this:-
background-position: top left;
|
|---|
Your image will appear at the top left corner of your page. The other possible values that you can use to replace “
top left” are:-
top center;
top right;
center left;
center center;
center right;
bottom left;
bottom center;
bottom right;
If
you do not want it entirely left, right or center, you can also define
the horizontal and vertical alignments either in percentage or in
pixels. Use either of these values instead, with
x being the horizontal value and
y being the vertical value.
x%
y%;
xpx
ypx;
Static background imageAfter
that, you may specify whether you want your background image to remain
in a fixed position when the contents of your blog are scrolled. By
default, the picture scrolls with your content. To have it stay put,
the code to insert is this:-
background-attachment: fixed;
|
|---|
Putting it all togetherThe eventual CSS code that you will have for your customized template may look like this:-
body {
background-color:#B38481;
background-image: url(http://i154.photobucket.com/albums/s255/ownlblog/narutosasuke1024x768.jpg);
background-repeat: no-repeat;
background-position: center center;
background-attachment: fixed;
|
|---|
You can also combine the attributes into one line and the shorthand code will look like this:-
body {
background:#B38481
url(http://i154.photobucket.com/albums/s255/ownlblog/narutosasuke1024x768.jpg)
no-repeat center center fixed;
|
|---|
Putting the above code into my blog, this is what you would see.
Of
course, after having added the background image, you will need to
adjust the colors of your text so that they stand out against the
backdrop. Go to Template -> Fonts and Colors to do that.
This
guide will give you an image background to your Blog. Sometimes, you
may have several images, all of which are suitable for your Blog. You
can read Random Header and Background Images on how you can have the background images rotated and a random image shown upon every page load.
You may also want to refer to the related article if you are thinking of adding an image to the Blogger Header.
@ Copyright 2012 Pradeep Lodhi (ethical hacker)
