How To Do 
     Useful Stuff 
         In Easy Steps..

Wednesday, September 9, 2009

How to add a twitter like fixed background image to blogger

Ever wanted to add a fixed background to your blog where your background stays fixed even if you scroll. This could be seen in all Twitter pages You can check out the blog for the preview of what you are going to get when you are done after following the steps shown below.

Step 1 - Go to a Twitter Profile page and get the permission of the owner to use this background image OR Find a suitable background image with the optimum resolution to fit the blogger page size.

Step 2 - Right Click on the twitter page and View the Page Source.

Step 3 - Copy the background: element seen after the body { tag.
Ex: From IceTweets profile Copy background: #0099B9 url('
TwitterBG.jpg') fixed no-repeat top left;

Step 4 - Go to the image by pasting the image URL(Shown within Quotes 
above) in the address bar of the browser and Save the Image in you 

Step 5 - Upload this image to a free image hosting site and copy the URL 
of the Image you uploaded.

Step 6 - Now replace the new image URL with the one shown in Step 3.
Ex: background: #0099B9 url('newImageURL') fixed no-repeat top left;

Step 7 - Now log in to Blogger and go to Layout > Edit HTML and search for the body { tag.

Step 8 - Now replace the existing background: #; element with the new background: #0099B9 url('newImageURL') fixed no-repeat top left; element in Step 6 and Click on 'Save Template' button and then 'View Blog'.

Thats It.. You got your self a cool Twitter like fixed image background for your blog . Congrats....

I would like to see your blogs ones you are done...


Mike said...

Cool! Thanks for the tip!

Feel free to check out my tech blog:


Post a Comment

Useful Blogs

Design by araba-cı | Blogger Template by GosuBlogger