Today I am going to show you how to add a pretty image background to your Blogger blog using a Html gadget. When you want to change your background you won't have to touch your Html template at all! Basically, if you can cut and paste, you can be your own Blogger designer. :-)
You have probably noticed that your Blogger blog background right now is a solid color, and it extends past your post area all of the way to the sides of your screen. In order to put an image on the background of your blog but keep a solid color behind your posts (I hate when the posts have a busy background) you will have to do a minor Html template tweak. Before doing this, be sure to Download Full Template (this backs up your original template) in case you mess something up! Yes, I have had experience in this... ;-)
The first thing you have to add is the code that allows you to change your Blog Wrapper Color (this is the solid color background behind your posts that we are adding in this tutorial) via your Layout, Fonts and Colors menu. We are going to assign it to a white color here (#ffffff), but you can change it to any color you wish via your Blogger Fonts and Colors menu later. Just copy this code below and past it as the first Variable Definition toward the top of your template.
<Variable name="blogwrappercolor" description="Blog Wrapper Color"
type="color" default="#fff" value="#ffffff">
type="color" default="#fff" value="#ffffff">
Now you have to assign this color to your outer-wrapper. Page down your code until you see the code for your Outer-wrapper (or Ctrl-F and put #outer-wrapper in the search) and copy and paste the code below #outer-wrapper { (as seen in the image above). Then Preview your template to make sure it works (if it doesn't just Clear Edits and start again) and then Save Template.
background: $blogwrappercolor;
Now go to Fonts and Colors and you can see your new Variable definition on top, Blog Wrapper Color. This can be changed to any color you want.
Now my blog wrapper color is blue! You can select any color sample you see on this page, or enter the color hex code of choice (I go to Photoshop or Photoshop Elements, click on the foreground color chip, put in the color I want and then copy the hex# I find in the bottom of the box, or you can use a site like Colour Lovers to find great color ideas).
You can keep everything as is, or add a pattern or image background to the sides of your blog. First you need to find your background. I am going to be posting free blog backgrounds here on my blog (I designed a vintage one you can download for free at the end of this post!), but you can use anything you want. I would suggest checking out the Texture for Layers Flickr Group for free textures if you don't want to make your own by scratch.
Just download the largest version you can find, open it your photo-editing program, make any adjustments in color/contrast, and crop 2000px wide by 1250px high. This is not an exact size, but a size I found works on most monitors. Then upload this background to Flickr (only do this if you have a pro account and have access to your original-sized upload) or my favorite,ImageHost. I usually use ImageHost because it is free and I don't have to clutter my Flickr account with backgrounds.
Grab the original-sized URL (that the HotLink with ImageHost) and paste it in the code below in the box where it says "YOUR PHOTO URL HERE", and make sure to leave the "". Your direct photo link should look like:
http://www.merrypic.com/files/h3nris29doul9jir1.jpg
<style type="text/css"> body {background-image: url("YOUR PHOTO URL HERE"); background-position: top center; background-repeat: no-repeat; background-attachment: fixed; }</style>
Once you have your code finished (I usually do it in Notepad), then go to Layout, Page Elements, and click on Add a Gadget somewhere (I usually use on on the bottom, it won't show on your blog so it can be anywhere) and add a new Html/Javascript gadget and paste the entire code there. This is a great way to add code to your template without editing your template. Save and Preview your blog. Your background should be there and you can change it anytime by putting in a new photo URL.
If you want to use a seamless pattern, use this code:
<style type="text/css"> body {background-image: url("YOUR PHOTO URL HERE"); background-position: top right; background-repeat: repeat; background-attachment: fixed; }</style>
Finally, if you use a background from Flickr or somewhere else that asks for a link back to their site for credit, just add it to your Html. This is a very easy tweak and something you should do to thank someone for their hard work.
Paste this code (replacing the http with your photo URL and the text "Background Texture Created... with your own text) just above the "end outer-wrapper" and Save Template.
<center> <a href=' http://www.flickr.com/photos/220466@N08/ '>Background Texture Created by Rita of CoffeeShop</a> </center>
You can see the clickable link on the bottom of your outer blog wrapper. You are done! Now go click on the blog background below to download it for free!
