Saturday, May 12, 2007

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!

5 comments:

Kristen Laurence said...

Oohh, this is what I was waiting for! Now, one question. If I find a wallpaper background design on a website such as stockxchange istockphoto, can those images be used as background photos, or do I need vector software?

If I do need vector editing functions (which I don't have), is there a good place to find free wallpaper samples?

Thanks, Alicia. God bless!

Love2Learn Mom said...

I believe so, though I'm not really sure what vector software is.

Love2Learn Mom said...

You can add a photo to a post on your test blog. After you've published that post, click on the photo in the post and then copy and paste the url you end up at into your coding as needed.

Kristen Laurence said...

Oops, I was logged in as my husband. Thank you for answering!

Cindy said...

So I'm feeling like a dolt here. I have this picture on my test site that I manipulated in Photoshop Elements, and wanted it to be the background of my main blog. Where do I insert? Do I copy the HTML that the picture is made of, or use a website address (that is what it looks like is already in there). Is this under the Primary Layout section? I'm so confused - help, pwease!