Adding a Picture to the Background

To all that might be interested in changing your background to a picture of your choice, I found some information concerning that. I copied this from another blog that I did a while back.

Step 1:
Sign into your blog.
Step 2:
Click the blog that you want to add a personal background.
Step 3:
On the left hand side, there should be a option that says "templates" click it.
Step 4:
You should be on the page that has your current template. Under you current template there should be a button that says "customize" click it.
Step 5:
On the top left hand side there should be a button that says "Advance" click it.
Step 6:
There should be a scrolling bar on the top left hand side. Scroll down to the bottom until you see the option "Add CSS" click it.
Step 7:
Now there should be a white box that says "Add CSS here to override existing styles." This is where you are  going to put the temple code in HTML. Before you do all this, you must first pick your background color.

Go to this link to pick the color and copy the code number HTML Colors 

After you have chosen your color, type this first part into the white "add custom CSS" box

body }
background-color: code that you chose;

EXAMPLE:

body }
background-color: #000000;

If this does not work for you, you might already have a template on your page. You would want to remove that by clicking on "Background" and under your picture clicking "remove picture."

Step 8:
This goes under what you just typed in the white box.

background-image: url (THIS IS WHERE YOU PUT THE URL OF THE PICTURE YOU WANT AS YOUR BACKGROUND. DO NOT FORGET TO PUT THE PARENTHESES AROUND THE URL);

This will work with any picture that has a url. I even tried it with the pictures that I have on Facebook.

Step 9:
There are three different options on this step. you can either have your picture not repeat, have your picture repeat vertically, or have your picture repeat horizontally. This code goes on the next line (choose only one of the three).

for no repeat type this:

background-repeat: no repeat;

for horizontal repeat type this:

background-repeat: repeat x;

for vertical repeat type this:

background-repeat: repeat y;

Step 10:
Choose your background position. by typing:

background-position: chose one of the following;

top right;
top center;
center center;
center left;
center right;
bottom left;
bottom center;
bottom right;

EXAMPLE:
background-position: bottom left;

Step 11:
The picture is going to move down the page when someone scrolls down your blog. It's kinda follows you down the page. If you think that this setting is creepy, you can turn it off by typing this code:

background-attachment: fixed;

Otherwise, you have the creepy stalking picture. Which is fine if that's the way you like it.

so, your end product should look something like this:


body{
background-color:#000000; 
background-image: url(http://www.winonasfloraltradition.com/pinkflower.jpg);
background-repeat: no-repeat;
background-position: top center;
background attachment: fixed;

If your picture seems small on the blog then it might be a low pixel picture. Try to find a big enough picture to fit the blog, or just chose to repeat the picture. After you are done, make sure to click the "apply to blog button."

Hope this helped. Let me know if some places need more explaining. Thanks for reading!

Here is the link that I got this information from:
changing the background in blogger