March 14, 2012

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.

13 comments:

  1. I'm happy you are showing people how to customize their simple template. I have used "Kevin & Amanda's" tutorial on how to get your own font for post titles and dates and I just changed to the blogger simple template and now I can't get her tutorial to work with this template. Do you know how?

    ReplyDelete
    Replies
    1. That's a good idea. I'll add it to my list of future tutorials. I have a long list of tutorials I need to do so it may take a little while but stay posted!

      Delete
  2. Thank you so much! This helped me a LOT.

    ReplyDelete
  3. The directions to make your own background are great! Thanks so much! I did have a question though about the size of the background when viewing from an ipad. My background image shrinks instead of filling the entire background :0(
    Is this something that the safari browser is doing? How would I go about correcting this?

    ReplyDelete
    Replies
    1. Unfortunately this happens a lot with mobile devices. If you follow the directions on this post it should correct that problem. However if you use any of my free backgrounds they will do just what you said. The difference between the two is that one of them repeats (like in this post) and the other one does not (my free backgrounds). Hope that helps!

      Delete
  4. my background appears only on the lower half of the blog. what to do?

    ReplyDelete
    Replies
    1. Without seeing your blog, it is hard to know exactly what you mean. I am guessing that you have one of the "Simple" templates that has a color that fades from the top to part way down your blog. If that is the case, read this post here on Customizing the Simple Template. It will help you find a template that works best with custom backgrounds. Let me know if this doesn't answer your question.

      Delete
  5. I have the same issue as Eman, it only shows on the lower half of my blog..Please help.

    ReplyDelete
    Replies
    1. Without seeing your blog, it is hard to know exactly what you mean. I am guessing that you have one of the "Simple" templates that has a color that fades from the top to part way down your blog. If that is the case, read this post here on Customizing the Simple Template. It will help you find a template that works best with custom backgrounds. Let me know if this doesn't answer your question.

      Delete
  6. I am following your steps but what if I don't see the background at all?

    ReplyDelete
  7. I have the same problem as Mandy. :( I'm following step by step everything you said but nothing happens when I add the CSS code. I'm so sad that I found your blog late and you're not that active as before and can't answer. Maybe something changed on Blogger since you made this tutorial...

    ReplyDelete
  8. THANK YOU for this post!!! I was having so much trouble trying to figure this out and it was because I was using the wrong type of simple template! Thank you!!

    ReplyDelete
  9. These were excellent directions! Thank you for taking the time to make it so clear and easy to follow, new bloggers like me really appreciate it!

    ReplyDelete

Thank you so much for leaving a comment! I would love to answer everyone's questions, but I am a busy mama. I will try my best, but technical questions that require me to study your blog's html are very time consuming for me. I may not be able to answer all of these comments. If you are a reader that knows the answer to a question, please help your fellow readers by offering your advice.