Monday, October 30, 2006

Setting Backgound Pictue In Your Blog

Alright, so here is the post about what I did for my back ground.

First, I search for a picture that I like.
After editing, I upload the picture on to the net. You can do so by posting pictures on your blogger, and use the html link. TO make sure that the picture comes out nice and clear, the size of the image should be large. Otherwise, your picture will only be on the centre of your blog. Please take note that usually the full picture will not be up on the net, so there is a lot of trial and error.

After you have done that, go to your template, under the 'Edit HTML' tab. Search for the 'body', which is usually after the description of the blog. Copy and paste the below HTML with the link of your preferred picture.

background-image:url( HTML with the link of your preferred picture);
background-attachment:fixed;
background-position:center;
background-repeat:no-repeat;


After you have done that, the end result will have some space at the side. You can choose to edit the color of the background to suit your picture, or you can expand it like what I have done. Copy and paste the below HTML if you want to expand your picture.

background-width: 840px

An example of the whole thing should look like this:

body {
background:$bgcolor;
margin:0;
color:$textcolor;
font: x-small "Trebuchet MS", Trebuchet, Verdana, Sans-serif;
font-size/* */:/**/small;
font-size: /**/small;
text-align: center;
background-image:url(http://photos.blogger.com/blogger2/xxxx/xxxx/xxxx/picture.jpg);
background-attachment:fixed;
background-position:center;
background-width: 840px
background-repeat:no-repeat;
}

By using blogger beta, it can help to make your editing easier. All you need is just get a Google Account, and you will be able to retain your original posts.However, since it is still in beta, there are some features that are not fixed yet.

Personally I have gotten used to beta, and I quite like it.

So enjoy yourselves by testing out which backgound suits your style and character!

If anyone has a better way of doing it or know how I can make my scoller HTML work, Please share with me too.

1 comment:

none said...

Thank you! Now I have a new project.