Content feed Comments Feed

Create your Own background for blogger

Posted by p4ladin Wednesday, 19 August 2009

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 PhotoBucket, google page creator, flickr,etc..razz

change code until become like this:

body {
background-color:your back ground color;
background-image: url(URL address of your image);
background-repeat: no-repeat;
background-position: center center;
background-attachment: fixed;

Change Background Color

If you would like to change the background color of your blog to a very unique color, you can manually specify the color value. you can using photoshop to find color as you like..
example :
body {
background-color:#B38481;

Background Image
body {
background-image: url(URL address of your image);

remember to change URL address of your image with yout URL of your image

Repeat background image

By 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 image

If 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: centre centre;
Your image will appear at the top left corner of your page. The other possible values that you can use to replace “centre centre” are:-

top center;
top right;
center left;
center center;
center right;
bottom left;
bottom center;
bottom right;


Static background image

After 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;

ok let's try......
Digg Google Bookmarks reddit Mixx StumbleUpon Technorati Yahoo! Buzz DesignFloat Delicious BlinkList Furl

0 comments

Post a Comment

Enter your email address:

Followers