How to Make Your Own Background (Simple Template)

Customizing the Simple Template - Part 2
 



In my last post, I showed you how to get your blog set up with the Blogger Simple template. Now it is time to start customizing it!

Let's get started with the background:

In a previous tutorial, I taught you how to create a background like this:

How to Make Your Own Background (Detailed Design)

I used to make backgrounds like this all the time and they are a lot of fun. However, they do pose a few problems.

The first problem is in regards to the Simple template. The great thing about using Blogger's templates, like Simple, is that you can adjust the width of your Post and Sidebar section yourself. However, if you design a background like the Puzzle Pieces background above, you will have to adjust the background image to match the width of your blog. If you decide to adjust the width later, you will have to redo your background image.

The second problem has to do with size and time. In order to make an image that will fill the background of your blog and accommodate those with large computer monitors, the images have to be huge. Both of these background images are very large files, especially the one with the decorations. When you put these images on your blog, they will take a long time to load because of their large file size and will slow down your blog for your readers.

So, how do we make a blog background without these 2 problems? We Simplify.

We are going to take a large pattern, crop the image and then repeat the pattern up, down, left and right on our blog. Sound confusing? Read through these steps before you begin.

**This tutorial is for the Blogger Simple template. If you would like to make a similar style of background for the Blogger Minima template, read HERE.

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.)

Here is 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. Depending on the size of your file, you may need to shrink it down to a smaller size as well.

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 highlighted section 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. Alright,  now it is time to put the code into your blog. But here's the best part. You don't have to go into "Edit HTML". No more worrying about ruining your blog.

Instead, go to the "Template Designer" (from the "Design" tab). Click "Advanced". A new list of options will appear next to the first list, scroll down until you see "Add CSS". Click "Add CSS" as you see below:

 Now enter the following code into the box:

.body-fauxcolumn-outer {

background: url(Your Direct Link) fixed;

}

.body-fauxcolumn-outer div {

background: none;

}

Where it says, "Your Direct Link", paste the code you copied from Photobucket. Your background should appear in the preview window.

If you like how it looks click, "Apply to Blog" and then "View Blog".

If the picture is a little big, or doesn't line up right, go back to your image and adjust it. Shrink it down if the image looks too big on your blog. If you adjust your image, remember to go back to Photobucket, delete the old file, and save the new background image file. I adjusted my file to be about 90 pixels wide.

Are you ready to try it yourself? Let me know how it goes. I'd love to see your custom backgrounds!

Click here to read Part 3 of Customizing the Simple Template: Creating Your Own Post Divider.