Another Blogging Tip

Miz Donna shared her knowledge with us about how to add tags to the photos on our blog and she asked about how to add an image to her blog background so I thought I'd share what I know about that.


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


Find a background tile you like, there are loads and loads to find if you just google for background tiles. I use photobucket to host whatever background images I use cause it's so easy to use their html image code for whichever images you've uploaded to their site.

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;
}

You'll be editing the line that I've made pink, above.

To add a repeating image to the background, you add the following (highlighted in red) to the body properties (using your images code):

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;
}
This will make the background image repeat across the whole page


To Make a background image repeat vertically down a page

You have to add the code in red 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;
}


To make a background image repeat horizontally across the page

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;
}


To create a fixed image background

You'll normally use a large image for this in order to cover the whole background screen. I dislike trying to make this work because it will appear different on different sized screens I think.

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 }

I hope this helps, thank you for sharing your knowledge with us Miz Donna.