105 How to use a background image for your blog October 15, 2007 /

Instead of a simple background color, you could use a background image for your blog. This could be styled to look like wallpaper, it could repeat only vertically or horizontally, and can even be in a fixed position where it stays in place while the rest of the page scrolls down!

In this post, I will explain the how you can use background images for your blog using these different methods, with examples to demonstrate how the various effects can be achieved.

You can use virtually any image as a background for your blog. Usually background images are in JPEG format, though you could also use GIF's or BMP's. However, you must be able to host the image on an external server, as Blogger only hosts images which are contained in widgets or posts. If you're looking for free image hosting, take a look at this post.

Before you begin to add the image to your background, find the image you would like to use, and make a note of the url where it is hosted.

As I mentioned in the introduction, there are different ways you can use background images. Here I will explain:

• How to make an image repeat across the whole page (like wallpaper)
• How to make a background repeat vertically down the page
• How to make the background repeat horizontally across the page
• How to create a fixed image background (which does not scroll with the rest of the page

All of these methods are possible in Blogger Blogs, and are quite simple to achieve.

How to make make an image repeat across the whole page (like wallpaper)

This is the simplest of all background effects to achieve. Most people prefer to use a small image which tiles seamlessly. This ensures that the page loads faster, since the image has a small file size.

You can easily find such images for your background by doing a Google search for tileable backgrounds, or could even create your own.

I created this simple image to use as an example, though you could just as easily use any other image:

To make this image a tiled background for your blog, go to Template>edit html and look for the styling properties for the body of your blog, which should look something like the example below:

body {
background: $bgcolor;
margin:0;
color:$textcolor;
font:x-small Arial sans-serif;
font-size/* */:/**/small;
font-size: /**/small;
text-align: center;
}

We need to edit the line highlighted in bold, which is where we declare the background properties of the blog. To add a repeating image to the background, we simply add the following (highlighted in red) to the body properties:

body {
background:url(http://www.imagehost.com/yourimage.jpg);
margin:0;
color:$textcolor;
font:x-small Arial sans-serif;
font-size/* */:/**/small;
font-size: /**/small;
text-align: center;
}

Where the URL of the image matches the URL of your background image location.

This will make the background image repeat across the whole page, like the example below:

If you prefer, you can also view the whole demonstration page here which offers a better view of the overall effect then the iframe above.

How to make a background image repeat vertically down the page

This involves a slightly different addition of code to your template, but is essentially the same principle. Again you should find the "body" style declaration in your template and add the url for your background image. Also, you need to declare that the background will repeat on the "y" (vertical) axis, as in the example below:

body {
background:url(http://www.imagehost.com/yourimage.jpg) repeat-y;
margin:0;
color:$textcolor;
font:x-small Arial sans-serif;
font-size/* */:/**/small;
font-size: /**/small;
text-align: center;
}

Using the same example image as before, this will create the following effect (or look here for a full page preview):

How to make a background image repeat horizontally across the page

This is very similar to the method we used to tile the image vertically. However, this time we tell the browser to repeat the image on the "X" (horizontal) axis, like this:

body {
background:url(http://www.imagehost.com/yourimage.jpg) repeat-x;
margin:0;
color:$textcolor;
font:x-small Arial sans-serif;
font-size/* */:/**/small;
font-size: /**/small;
text-align: center;
}

This will produce an effect like the example below (use this link for a full page preview):

How to create a fixed image background

Usually a larger image is used for this method, so for this example we will use the following image from Pyzam.com):

To ensure this background image does not repeat, we need to add the "no-repeat" declaration to the background properties. Also, we need to add the statement that the background attachment is fixed, so that the background does not move with the page. Here again is an example of what your code should look like, with the changes highlighted in red:

body {
background:url(http://www.imagehost.com/yourimage.jpg) no-repeat;
margin:0;
color:$textcolor;
font:x-small Arial sans-serif;
font-size/* */:/**/small;
font-size: /**/small;
text-align: center;
background-attachment: fixed }

And here is the example of what this property achieves (use this link for a full page preview):

You can add color too!

Unless you tile your background image across the whole page, you will be left with blank white areas. To fill these areas with the color of your choice, you should also add color to the background property.

If you already have a "$bgcolor" variable in your blog template, you can simply add this variable to the background properties, like this:

background: $bgcolor url(http://imagehost.com/yourimage.jpg) repeat-x;

However, if you do not have this variable in your template, or instead would prefer to declare the color yourself, you can do so using Hex values for the color you wish to display. There is a useful color calculator in the tools section which can generate the hex values require. Here is an example of how you can declare the hex values for the color in your background:

background: #ff0000 url(http://imagehost.com/yourimage.jpg) repeat-x;

Using the first image as an example, this would generate a background like this:

Positioning the background image

By default, the background image will begin in the top-left corner of the page, regardless of how you want the background image to repeat (or not) across the page. However, you can specify where you would like the image to be placed by adding some extra variables to the background specifications.

Here is an example of the bldy's background property to show where you can place the positioning variables:

background: #ffff00 url(http://imagehost.com/yourimage.jpg) positioning-variables-here no-repeat;

And here is a list of the positioning variables you can use:

• top left
• top center
• top right
• center left
• center center
• center right
• bottom left
• bottom center
• bottom right

If you wanted to position a fixed image at the top center of a page for example, you could use the following code:

background; url(http://imagehost.com/yourimage.jpg) no-repeat top center;

It is also possible to set the starting position of the background image using percentages on the X or Y axes, or by specifying the distance in pixels from the top or left of the page. However, this can be rather complicated, and since people use many different browsers and screen resolutions when browsing the internet, this can cause serious problems for blog design! If you would still like to know more about this, I would recommend reading the information on the CSS background page at W3 schools.

I hope this tutorial has helped you understand how to use background images in your blog, and covered all aspects of how these different effects may be achieved. As always, your comments and opinions are much appreciated!

If you would like to receive updates of new tutorials and posts from Blogger Buster, please consider subscribing to our feed.

Technorati Tags: background+image | blogger | template | backgrounds