Mary Shaw, back again! This week I’m going to show you how to put a custom background into a Blogger blog. It’s not really hard, if you know how to do it. So follow along.

Background Wisdom

First I’m going to get on my soapbox about backgrounds.

Any kind of background business belongs outside of the blog text itself, not behind the blog text. This is because it’s hard to read a blog with business behind the words. Try it; visit a bunch of blogs and pay attention to the backgrounds.

The best behind-the-text backgrounds are solid colors (yes, white is best) with high contrast text. If you’re going to go with a dark background and light text, be sure the text is large enough that it’s easy to read.

If you really must have a busy background behind your text, go into Photoshop and adjust its opacity so it becomes really “soft.”

Does it matter? Yes, actually. Your readers will appreciate it – and some will stick around longer, too.

Installing a background

This is the second in a two-part series. I am starting with the blog I worked on last week. At that time, I added a custom header and custom buttons.

For this demo, I’m using a background that comes with Melissa Esplin’s Psychedelic Circus blog kit. Her kit has 10 backgrounds to choose from. I’m going to pick the yellow swirly one since that matches the yellow background in the customer header I made earlier.

This background graphic is just a little square, but that’s okay because the web browsers will automatically “repeat” it both horizontally and vertically. The browsers won’t do it automatically; they need a little instruction. We’ll do that, as well.

We have to put the link to the background graphic into the page’s CSS stylesheet. Blogger doesn’t give you an intuitive way to do that, but I’m not going to give up so easily.

First, I have to upload the graphic to Blogger’s server. To do this, I go to Layout > Page Elements > Add a Gadget (right rail) > Picture (I showed you how to do that in my first post about customizing blogger). This gadget is temporary. Once I’ve set up my background, I’m going to delete it.

I select my background and hit “Save.” I don’t bother with anything else in that box, because I’m going to throw it away. All I need is the link to the uploaded graphic.

Then I preview it so I can get the link to the graphic.

When I preview it, I see the little background box in the right rail.

I need to get the link to the background. In Firefox, I right-click on the page and choose “View Page Source.” In Internet Explorer, I right-click on the page and choose “View Source.”

Then a page that looks a lot like Notepad appears, containing the actual “HTML markup” of the page. That’s what your web browser reads in order to display the page.

In order to find the link to the background, I select Control+F (or Edit/Find up in the menu bar) and enter part of the graphic’s filename. All of Melissa’s backgrounds contain the word “psych,” so I enter that into the find window. Then I see the link to the page.

The whole “HTML tag” (the thing that makes the image show up in the page) is as follows. I’ve bolded the part that I actually need from this tag.

<img alt=” height=’144′ id=’Image4_img’ src=’http://4.bp.blogspot.com/_1m0JRGzh46c/S4mC-OWgDrI/AAAAAAAAAB0/jor1BRMVD2A/S220/DHD_melissaesplin_psychcirq_bubble-2.png‘ width=’144′/>

I highlight it and copy it (control+C) for putting into my background. I don’t close that window, so I can get back to it again quickly if case I need to.

Now that I have a link, it’s time to install it into the page’s HTML/CSS. I click “Edit HTML” in the top menu. Then I need to find the body CSS. I hit Control+F and search for “body {” to get to it. It looks like this:

body {
background:$bgcolor;
margin:0;
color:$textcolor;
font:x-small Georgia Serif;
font-size/* */:/**/small;
font-size: /**/small;
text-align: center;
}

In order to change the background, I just have to remove the $bgcolor and paste in the URL (link) to my new background. URLs have to have the word “url” and parentheses around it, as you see here. The word repeat after it tells the browser to fill the entire background with repeated images.

body {
background: url(http://4.bp.blogspot.com/_1m0JRGzh46c/S4mC-OWgDrI/AAAAAAAAAB0/jor1BRMVD2A/S220/DHD_melissaesplin_psychcirq_bubble-2.png) repeat;
margin:0;
color:$textcolor;
font:x-small Georgia Serif;
font-size/* */:/**/small;
font-size: /**/small;
text-align: center;
}

It’s time to preview the page. On the Edit HTML page, the preview button is below the type-in box.

When I preview it, I see that it’s not exactly what I want. The center text is flooded with the background text. It’s too hard to read; I want a white background behind the center part of my page.

So I do a Control+F and find “#outer-wrapper {” to get to that part of the CSS. I add a little line that turns its entire background white. I’ve bolded my new line below.

#outer-wrapper {
width: 660px;
margin:0 auto;
padding:10px;
text-align:$startSide;
font: $bodyfont;
background-color: white;
}

Now I preview it again.

As you can see, I’ve achieved the effect I want: the background is on the left and right edges and the center area is all white. This is very important: I have to hit the “Save Template” button below the type-in box.

I can now delete the picture gadget I added earlier to remove the little yellow box in the right rail. I go back to “Page Elements” in the menu bar, find the gadget I want to remove, and click “Edit.”

I see a “Remove” button. I click it to get rid of the gadget. I click “OK” at the prompt. Then I click “Save” to be sure the page is saved.

When I preview it again, I see that the yellow box is indeed removed.

So that’s it. I have added a background from start to finish. I hope this helps you. Happy Blogging!

Related posts

• Tutorial: How to make custom blog buttons
• Tutorial: How to make a custom blog header
• Tutorial: How to add a shortcut icon to a Blogger blog
• Tutorial: How to customize Blogger
• Tutorial: How to create a WordPress blog

Tags: Blogs, Mary Shaw, Melissa Esplin, Tutorials