Blogger Hacks: Putting background image for you blog

Applying a background image is a simple and quick customization which can apply volumes to the style of your fixed width blog.

For my demonstration template, I decided to use a blue patterned background image which blends well with the colors in the header. There is a wonderful selection of patterned background images available for free download at SquidFingers (in fact, this selection is among the best I've ever seen!); though a Google search for tileable background images will bring you some alternative downloads to try.



*Choose your background image

The first step to using a background image for your blog is to find one which you like. I chose this pattern from Squidfingers, though you could choose any image you prefer. You will need to save the background image to your computer as we will be using this very soon.

*Upload your image to the web
In order to use a background image for your blog, you will need to upload this somewhere online. One method is to upload this to Photobucket, or a similar free image hosting service. But here is a trick to help you host your images with Blogger for free!
Simply create a new post and upload your image as normal. But don't publish the post, just save this as a draft which you can delete later.
Now preview your draft post. You should see your image displayed in the preview page. Right click this image and view the properties. From here, you should be able to extract the URL of where this image is hosted. Copy this URL to your clipboard or Notepad so you can use this to reference your background image in the template's HTML code. Now you can safely delete this draft. Choose NOT to delete the image when prompted, otherwise you will be unable to use this URL for referencing your background image.
Alternatively if you choose to upload your background image to Photobucket (or similar hosting service), ensure you have copied the URL of your image.

Adding the background to your template code
We will now need to edit a small part of your template's HTML code to add this image to the background. So go to Template>Edit HTML in your blogger dashboard, and look for the following lines:

body {
background: $bgcolor;

We need to add the URL of your background image to the "background" statement using the following format:

url(the_url_of_your_image )

The addtional code should appear like this:

body { background:$bgcolor
url(http://bp0.blogger.com/_xn2gmPb9TfM/R4TGdeDdP4I/AAAAA
AAAArY/RP5IQy-eABA/s1600-h/pattern_140.gif);

Of course your own URL will be different. Just be sure to follow the same format, and ensure that the semi-colon (;) appears at the end of the statement. Now preview your blog to see the changes. It may look something like this:








If you are happy with the background, you can then save your template for us to go on to the next step. However, if you prefer not to use this, you can simply click the "clear edits" button and start over again. Now in my demonstration template, you will notice that the text is barely visible against
the patterned background. This leads me to the final customization of this tutorial: changing the background color of the main blog content.

Source:ebook-guide to blogging by Amanda Zafani(www.bloggerbuster.com)

Related Posts by Categories

Widget by Hoctro | Jack Book