Shout!



26 December 2008

Adding background image to your Blog

This tutorial shows you how to put a background picture to your blog.

It is basically adjusting your template HTML.

Firstly!!! BACKUP YOUR TEMPLATE.

Then, we can proceed with the tutorial.

1. Login to your Blogger dashboard.

2. Select your blog. Then, Layout > Edit HTML.

3. In the Edit Template box, press Ctrl-F to find body { or something like that. Please refer to the picture.



4. As you can see, the settings that I've used for the blog is:

background-image: url(http://www.geocities.com/bekmenjahat/back.jpg);
background-position: bottom right;
background-attachment: fixed;
background-repeat: no-repeat;


5. Let me explain it in detail:

- background-image: url(URL) property

URL in red is where you put the URL of the background image. How to find it? By simply searching through Google Images or by uploading your favorite picture in Image Hosting website such as Photobucket, Imageshack, Flickr, Picasa and lots more.

- background-position property

This is the part where can configure your background image to appear at the specified location. In this example, the background image will show the background in the bottom right corner of the website.

Here is other option for background position:
top left
top center
top right
center left
center center
center right
bottom left
bottom center
bottom right

- background-attachment property

The background-attachment property defines whether the background image will be fixed or scrolled.

scroll - Default. The background image moves when the rest of the page scrolls
fixed - The background image does not move when the rest of the page scrolls

- background-repeat property

repeat - Default. The background image will be repeated vertically and horizontally
repeat-x - The background image will be repeated horizontally
repeat-y - The background image will be repeated vertically
no-repeat - The background-image will not be repeated

6. After finishing your configuring, preview your template first. If there is no error, then click the Save Template button.

7. Your changes have been saved. You can view your blog with a nicer background image of your own. That's all. The End. =)


SHARE IT:

1 comments:

The Hip Hop Swap Staff said...

GREAT INFO!!!!

Post a Comment

 

SpiderZMeN's Blurbs | SpiderZMeN's Facebook | SpiderZMeN's Friendster | SpiderZMeN's MySpace | Blog Template by yummylolly.com