Blogger 101: Adding a Background Photo Border

This works better in a template that has post and sidebar areas that are separated from the background area such as this and this, but not this or this. (Because otherwise your photo will run behind your text and that could be awfully hard to read).

Suggestion: Even with a photo as a border, take a look at the overall effect and try to choose something that's not too overwhelming. I know I'm a little on the visually sensitive side - if something is too loud or dramatic, it makes it hard for me to comfortably read the text (I also don't like it when people have audio things playing on their site or flashing and moving characters - what my husband calls "dancing baloney" - I personally think opt-in is good for extra effects). You might also want to consider that some people have dial-up and/or slower computers and a lot of extra files to load can make it hard for them.

Anyway, on to the hacking...

Here's an example of the segment of text in which to insert your photo. This is from a rounders template (but with an already-tweaked background color):

body {
background:#C5B795;
margin:0;
text-align:center;
line-height: 1.5em;
font:x-small Trebuchet MS, Verdana, Arial, Sans-serif;
color:$mainTextColor;
font-size/* */:/**/small;
font-size: /**/small;
}

The way I figured out how to do this was to sneak some code from a scribe template (which has a background image) into a different template and plug in my own photo url. Here is the coding segment from the scribe template:

body {
margin:0;
padding:0;
font-size: small;
text-align:center;
color:$textColor;
line-height:1.3em;
background:#483521 url("http://www.blogblog.com/scribe/bg.gif") repeat;
}

This is the coding I used at Love2learn Moments.

body {
margin: 0;
padding: 0;
border: 0;
text-align: center;
color: $mainTextColor;
font-size: small;
background:#666 url("http://www.love2learn.net/blog/rockybackground.jpg") repeat;
}

You can find photo suggestions in this post.

Happy Mother's Day!