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
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:
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;
}
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;
}
No comments:
Post a Comment