Wednesday, November 19, 2008

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.

2 comments:

Donna said...

Say WHAT??? HAhahaaa...GEEZ Girl! I'd Like to do these things but I did Not understand a Thing you said!!Hahahaa...I Really need to Get With it!! I've found backgrounds I'd Love to have but once I've downloaded it, I don't know How to get it Uploaded onto my site!!! Such a nitwit!!hughugs

jazzi said...

Now see, YOU ought to be teaching my web design class.

Maybe you need to do a photobucket tutorial, too!