How to Change your Background

Okay. Ready for this super easy "How to Change your Blog Background" tutorial? Let's Do it.

Blogger's has a sweet Template Designer that eliminates the need to play around with that messy HTML code! It helps you change lots of options on your blog such as font colors, links, borders, templates, AND backgrounds!

This is especially nice if you want to create your own background from Digital Scrapbooking kits in Photoshop or another editing program and upload them directly through blogger. Or, you could just as easily choose any photo from your computer or on the web.

Here's how to change your blog's background:

1. From your blogger Dashboard click on "Design".

2. You should be taken to the "Page Elements" page under the "Design" tab. There's this nifty little "Template Designer" button. Click on it.

3. In the left column click on "Background" and next to the background image is a little down arrow. Click on that too.

4. A window pops up that looks like this. Click on "Upload Image" at the top left. Then you can "Browse" through your files to find an image for your background. They recommend 1800x1600 pixels.

I made my background image at 1600x1100 px/in and it ended up being too big and gets cut off on the bottom of the screen. Then I figured out that my computer monitor has a resolution of 1600x900, but in my browser window I have all the toolbars on top and bottom so the actual height that I can see is probably only about 675px. so that's why I can't see the whole background.


*TIP- If you are designing your own background from scratch*

Depending on other people's screen resolutions they might see more or less of the background than you can. A helpful tip  *You should try designing your website for your audience. But you might not know what type of screen resolutions your visitors have if you don't have analytics set up for your site..... That's okay. I have found that 1280x1024 and 1024x768 seems to be the most common sizes and I'll show you how to optimize your design for all screen types by tiling your image. So that, for instance, even I can see your design across my entire screen at 1600px wide.

Anyways, back to the tutorial.....

5. After your image has uploaded, click on it so it is highlighted in orange and hit "Done".

Now you should see this:

6.  Click on the drop down arrow next to "Alignment". Select the top middle button (which will pull your background up to the top of the window and center it).

7. Then click on the next drop down arrow below, mine says "Don't tile", I'm not sure if this is the default so yours might say something else.

Okay here's where it will matter what screen size other people have and how much of your background they will be able to see.

I think the best solution is to "Tile" your image. This means that your image will repeat on the sides and bottom of your website, which works out nicely if someone has a larger screen than your background image.  *If you choose "Don't tile" then other people with larger screen resolutions than your photo will see white space (mine is gray space) around your background image. Which doesn't look very pretty and appealing.   ;-)

Here's a few examples:

Tile Vertically *notice the gray areas to the sides where it is not tiled

Tile Horizontally *notice the bottom is gray, (the top is not because we aligned our image to the top).

Completely tiled (looks like 6 of the same picture)

"Don't Tile" option

Now keep in mind that in the above examples I have my browser zoomed way way out to see so much of the background.

8. Now this is a personal preference, but I like a "static" background, which means it doesn't move when you scroll up and down, so I leave "Scroll with page" unchecked.  But if your background has a nice repetitive style you might want to experiment with it. On the other hand, if your background is busy it might distract too much from your content with so much going on.

Play around with that for a second and decide which way you like best.

Almost done...........

9. Last thing to do is make our blog transparent so your background shows through. In the left column click on "Advanced", then "Backgrounds" in the second column.

 

Now Change all the color settings to "transparent".

**On a side note, if your background image is dark, or too busy and distracting you might want to leave these settings alone, but this is where you could change their color if you wanted.

 

10. Just click on "Apply to Blog" in the upper right hand corner to save your changes.

Yay! You're done! Good Job!  Now Click on "back to blogger" and it will take you back to your "page elements" tab. From there just click on "View Blog".

I hope everything worked for you and this tutorial was helpful, not confusing! :-) Aren't you so excited now that you can change your blog background as often as you like? I SURE AM!