How To Make a Patterned Blog Background

I have absolutely NOTHING to blog about today.  It’s not that I have no life.  In the last 24 hours, I’ve taken the girls to the park, watched my son’s baseball game, watched American Idol, gone to the mall blessedly ALONE, had an impromptu play date for my daughter which involved the Easy Bake Oven, and worked on planning my Hebrew National Picnic With A Purpose.  (Hey – if you’re in the Philly area and wanna come, it’s May 30.  Email me for an invite.)  I’ve taken a walk, caught up on my most pressing design projects, and dead-headed my petunias.  The house is in good shape, and the weather is positively glorious.  I just want to bask in it and not write about it.  Besides, I did write a substantial Idol recap late last night so it’s not like I’ve fallen off the face of the earth.

Then it hit me.  It’s Thursday and I have a How To post all ready to go in my Drafts folder.  D’OH!  So here you are.

A reader emailed me last week:

Love your tutorial about designing a blog header – do you have one for blog backgrounds?

I love how you guys keep me in topics for my weekly How To feature.

1) Find a seamless image.

First of all, you must have a pattern that is repeatable.  That means that the sides line up so that when it tiles or repeats, it will look like a continuous pattern.  One of my biggest pet peeves with blog designs is when the background doesn’t tile properly, and you can see the “seams.”  Sends my OCD into overdrive.

So when you go to search for blog backgrounds, always include the word “seamless” along with whatever design element you’re going for.

2) Save and host your image.

Once you find the seamless pattern you like, you need to host it somewhere.  I use Photobucket.

3) Copy the direct link to your clipboard.

Photobucket will give you a “direct link” to the hosted image under the thumbnail of the image.

A direct link looks like this:

Copy that to your clipboard.

4) Create the code in the HTML of your blog.

Log into your Blogger account.  (Directions for Typepad and WordPress to follow.)  Go to Template then Edit HTML.  Locate the ‘body’ section in your CSS.  It looks like this:

body {
background:$bgcolor;

Replace the selection in bold so it looks like this:

body {
background-image: url(http://i268.photobucket.com/albums/jj12/dcrdesign/swirl-wallpaper-green-1.jpg);

Use the direct link to YOUR image, of course — not mine.  Unless you like mine.  Then it’s all yours.

5. Preview your blog to see if it looks the way you want it.

It should!  If not, um, I plead the 5th.

Typepad Instructions:

For Typepad users, you must have the Pro account to access your CSS.  If you have the Pro account, then all you have to do is go into Design and click on Edit CSS.  It is probably a blank box.  Just enter this:

body {
background-image: url(http://i268.photobucket.com/albums/jj12/dcrdesign/swirl-wallpaper-green-1.jpg);
background-repeat: repeat;
}

Use the direct link to YOUR image, of course.

WordPress Instructions:

WordPress is more complicated because every theme is different.  In MY theme, it looks almost like the Blogger one.  My body tag looks like this:

body {
width: 1006px;
background: url(http://i268.photobucket.com/albums/jj12/dcrdesign/swirl-wallpaper-green-1.jpg);

Got questions?  Comments?  Other tips to share?  I’ll respond to feedback in the comments.