This post will walk you through step by step how to add Backgrounds to your Blog for Blogger or WordPress!

Blogger Background Tutorial

1. If you are using one of the new themes from the Blogger Template Designer, you can click on “Design” from your Dashboard, then click “Template Designer” and choose the “Background” link on the left side.

2. Under “Background Image” when you click on the small background thumbnail image, a box will pop up so that you can select your background. Simply click “Upload Image” then upload the background file and set it to “tile” so that it repeats endlessly. Just save it and you’re done. Super quick and easy!

If you have a custom theme, if you are using an older Blogger template or if you prefer to work with the CSS directly, simply follow these steps:

Online Image Hosting:

1. Once you have your seamless background file downloaded to your computer, the first thing you need is a place to store the file online. You will need an online host such as Picasa, Flickr, or Photobucket.

2. If you don’t have an online photo host, I recommend Picasa. The Picasa albums are fully integrated with Blogger and you can create multiple albums that are easy to navigate. To access Picasa, visit this link: www.picasa.google.com and sign in with your Blogger account information.

3. Simply create an album, upload your background file to the album and click on your newly uploaded background file. Once the image file is in view, right click on the image file and select “view image” or “view image property”. This will lead you to the image file property link.

4. Select and copy the image property link, it will look something like this:

http://your-background-property-link/image-name.png

You will need your file’s property link when you are editing your Blogger HTML.

Editing Blogger HTML Code:

5. In your Blogger Dashboard, select “Design”, then select “Edit HTML” and you will see the html and css for your blog template (this tutorial is using the Minima Template) . First, copy your template html so that you have a backup for your template design. Then scroll down in your css coding and find the “body” code:

body {
background:$bgcolor;
margin:0;
}

6. You are going to edit this code by adding your property file link to the background and telling it to repeat endlessly. After editing, it should look like this:

body {
background:$bgcolor url(http://your-background-property-link/image-name.png); repeat-xy;
margin:0;
color:$textcolor;
}

7. (Optional): Sometimes your blog may not have a middle wrap (the white background for your text), if that’s the case, find the “outer-wrapper” code:

#outer-wrapper

8. You are going to add a background color and increase the width size so that it looks something like this:

#outer-wrapper {
background:#ffffff;
width: 900px;
margin:0 auto;
padding:10px;
text-align:$startSide;
}

9. Once this code is added, click “Save Template” and view your blog to see how it looks with your new background!

WordPress Background Tutorial

1. If your theme is compatible with the WordPress 3.0 Background Function, you can click the “Background” link, located under “Appearance” in your WordPress blog, upload the background file and set it to “tile” so that it repeats endlessly.  Click “Save Changes” and you’re done. Super quick and easy!

If you have a custom theme or prefer to work with the CSS directly, simply follow these steps:

Online Image Hosting for “Self-Hosted WordPress”:

1. Once you have your seamless background file downloaded to your computer, the first thing you need is a place to store the file online. With WordPress, you can store the image right on your blog or website. It’s much easier this way and your hosting space can hold a lot of images.

2. Once you sign into your blog, just click on “media” (this is located on the left towards the top – just under posts). Then click on “add new” this is the direct link: http://yoursite.com/wp-admin/media-new.php

3. Simply upload the background Image from your computer to your media library. Once it’s uploaded, you’ll see “file url” at the bottom of the image details.

4. Select and copy the file url property link, it will look something like this:

http://yoursite.com/wp-content/uploads/image-name.png

You’ll need your file’s property link when you are editing your WordPress CSS.

Editing WordPress CSS Code:

5. In your WordPress Admin, select “Appearance”, then select “Editor” and finally make sure you are viewing the “Stylesheet” file (style.css). First, copy your stylesheet CSS so that you have a backup for your template design. Then scroll down in your css coding and find the “body” code (it should be towards the top):

body {
background: #ffffff;
color: #222222;
font-size: 12px;
}

6. You are going to edit this code by adding your property file link to the background and telling it to repeat endlessly. After editing, it should look like this:

body {
background: #ffffff url(http://yoursite.com/wp-content/uploads/image-name.png); repeat-xy;
color: #222222;
font-size: 12px;
}

7. Once this code is added, click “Update File” and view your blog to see how it looks with your new Background!

Pin It