How to Make Your Own Blog Background (Simplified Design)

Updated 7/20/2012. 
Instructions for an even simpler design using Pixlr are shown in this recent update.

I recently posted instructions on How to Make Your Own Blog Background. The actual design process for those instructions may be hard for some that don't have good design software. Therefore, I am posting additional instructions for a simpler design like you see below. These instructions do involve editing the HTML a little.

To create a simpler background image, we are going to take a large pattern, crop the image and then repeat the pattern up, down, left and right on our blog.  Creating a background in this way will help your blog to load faster and allow readers to access to your blog without slowing down their computer. 

**Before you start, make sure you have the Blogger Minima template. (To get this template, follow steps 4-7 HERE OR use my Minima Wide 2-Column Template OR use my Minima 3-Column Template ) These instructions use Pixlr, an online photo/graphics editor but they can be adapted to any graphics editing software.

1. Start by choosing an image that you can use for a blog background. I like to use digital scrapbook paper but be sure to check with the designer before using their images on your blog. Many designers have strict terms of use and do not allow their images to be used on websites or blogs. (But don't be afraid to email them to ask.)

I chose a digital scrapbook paper from Katie at Just So Scrappy When choosing your image, it is best to choose one that is symmetrical. As you read the instructions, you will see why.

2. Open your image in any type of editing program, Paint, Photoshop, Pixlr. Your software can be as simple or as complicated as you want, you just need to be able to crop, zoom (optional but helpful) and save as a jpg or jpeg. Depending on the size of your file, you may need to shrink it down to a smaller size as well.

If you are using Pixlr, go to pixlr.com and click Open Photo Editor. Then click Open Image From Computer. Find your image and click Open.

3. Once your file is open, choose the Crop tool. You are going to crop this image down to a very small section of the design. When choosing how to crop this design, keep in mind that you are choosing a small rectangular section that will be repeated up and down your blog background as well as from left to right. Here is my crop below:

The dotted square is the part that I am keeping. Notice how small this section is. Also notice how symmetrical this image is. On my blog, this small rectangular section is going to be repeated over and over, like this:

(Border lines have been added to show you the borders of the cropped image and to show how it repeats. They will not appear on your blog.)

When you crop your image, make sure that the pattern continues to flow when the small pieces are placed next to each other. This means, if you have a flower or something similar that is cut off on the right side, the left side of the image must be a continuation of that flower. Same for the top and bottom. You may need to zoom quite a bit to get an accurate crop of your image.

4. Once you have cropped your image, save it as a jpeg. 

5. Now, we need to upload it to the web: 
To place your image on the web, you need to find an image hosting site. Photobucket is a great image hosting site that is free and gives you plenty of storage. Set-up your account by following the instructions on their site. Once you are logged in, click the green Upload now button. 

On the next screen, click Select Photos and Videos.

When the image is uploaded, click the small box next to the file name so that there is a check mark. Then click Choose action and select Generate link codes for selected.

The following screen should pop-up:

In the box that says, Direct link click anywhere in the box. This will copy the link code so that you can paste it in the next step.

(If you accidentally saved the image before getting the link code and you are now in your album, hover your mouse over your image until you see the option "Share". Click Share and then click Get link code from the pop-up window. Click the Direct link code until it is all highlighted and then copy it by choosing Edit, Copy or by pressing Ctrl-C on your keyboard.)

6. Time to go back to your blog. Go to your Blogger Dashboard and select Template from the drop-down menu. Click Edit HTML. Before you make any changes, back-up your blog template. Scroll down in the middle box until you see the code below. (It is near the top after all the "Variables definitions". Type Ctrl-F if you can't find it and type in the search box part of what you see below.) **If you do not want to edit your HTML (you are afraid of messing it up), scroll down to read an alternative method.

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

Add the lines you see in red so that the code now looks like this:

body {
  background-image:url(Your Link Code Here) fixed;
  background:$bgcolor;
  margin:0;
  color:$textcolor;
  font:x-small Georgia Serif;
  font-size/* */:/**/small;
  font-size: /**/small;
  text-align: center;
  }

Replace the "Your Link Code Here" with the link code you copied from Photobucket. Preview your changes, by clicking "Preview", before saving to make sure that you copied correctly. The semi-colon at the end of each line is VERY important, don't skip it.

Click Save Template and then View Blog.

**If you do not want to edit the HTML (you are afraid of messing it up) or if the background does not show up when you follow the instructions above, try this instead:

A. Choose Layout from the Dashboard.
B. Click Add a Gadget and choose HTML/JavaScript.
C. Type the following in the Content box:

<style type="text/css">body{background-image: url("Link Code"); background-position: center; background-repeat:: repeat; background-attachment: fixed;}</style>

Be sure to replace Link Code with the Link Code you copied from Photobucket.**

D. Click Save and View Blog.

**If your design is too big, go back to your cropped image and reduce the size. In Pixlr, click "Image" and then "Image Size" to adjust the size. Reduce the size of the image (keeping the proportions constant) and then save the file again. You will need to delete the image from your Photobucket account and upload the new saved version. **

Once your background is up, your blog will be harder to read like you see below. That is ok, the next step fixes this.

7. Click Template from the Dashboard and then click Edit HTML.  (Backup your template before editing the HTML.)
Scroll down until you see this: (or Ctr-F and type outer-wrapper into the search box)

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

Add the lines you see below in red:

#outer-wrapper {
  background:$bgcolor;
  border:5px solid $bordercolor;
  width: 660px;
  margin:0 auto;
  padding:10px;
  text-align:$startSide;
  font: $bodyfont;
  }

**If you want a thicker or thinner border, just change the 5 to whatever size you want. Do not delete the "px".

Preview your blog and then click Save Template if everything is ok.

Now you're blog should look like this:

 8. You can change the color of the background and the border by going to the Blogger Dashboard and choosing Template from the drop-down menu. Then click Customize to access the Template Designer. In the gray panel, click Advanced, then Page Background Color. Then click the white box that has an arrow next to it as shown below:

 

Once you have found a color you like, scroll down from the Page Background Color until you see the Border Color. Click Border Color and then choose a color just like you did before. Once you like what you see, click Apply to Blog in the top right corner. Finally click View Blog and you are done!

Congratulations! You created your very own blog background!!