I said I would give a tutorial on how to change blog backgrounds. It took me awhile to get around to it with the holidays and all but here it goes. I use Photobucket so I am going to use that as my example because I am not sure how other photo programs work.
#1. The first thing you want to do is find the background that you would like to use. On mine, the is the paper with the snowflakes on it. Then you will chose what is called the outer wrapper. On mine this is the white paper. I purchased digital scrapbook paper for my backgrounds, but you can choose whatever you would like. Once you have those picked out, upload them to your picture host. In photobucket, it will then give you the html code you will need to copy & paste into the edit template html. The code will look something like this: http://i18.photobucket.com/albums/b103/cindydean65/blog/1JBaechtold_Thankful_BG1.jpg
In photobucket you will want to use the Direct Link code.
#2. After you have done all that, you will want to go into blogger and edit your template. Click on the edit HTML tab. Then look in the HTML for body { background:#ffffff;background-image: url This is where you will want to paste you code. This is how it should look when you paste your code:
body { background:#ffffff;background-image: url(http://i18.photobucket.com/albums/b103/cindydean65/blog/20sChic_JBaechtold_BG8.jpg);background-repeat:repeat-xy;
Make sure you have the repeat:repeat-xy in there because that will make sure it repeats the pattern. At this point, I would save you template and view it to see if you did it right. I did that and kept working on it until I figured it all out.
#3. Next you will want to do the outer wrapper the same way you did the background. When you paste your code, it will look like this: #outer-wrapper {background-image:url("http://i18.photobucket.com/albums/b103/cindydean65/blog/1JBaechtold_Thankful_BG1.jpg%22);background-repeat:repeat-xy;
Save it and check your template again. For this there is one extra step. You can adjust the width of this wrapper by changing the pixels. Look for this: width: 780px; If you want it wider or skinner, just change the number portion on this code. Each time you change it, save and check it out and see what you like.
#4. No go have fun making your changes. Send me a note and let me see what you've done if you use this. It's not to hard once you get the hang of where you should be changing the code. There are all kinds of adjustments you can make. Remember, I am no expert...I just played around until I figured out how to do it...
#1. The first thing you want to do is find the background that you would like to use. On mine, the is the paper with the snowflakes on it. Then you will chose what is called the outer wrapper. On mine this is the white paper. I purchased digital scrapbook paper for my backgrounds, but you can choose whatever you would like. Once you have those picked out, upload them to your picture host. In photobucket, it will then give you the html code you will need to copy & paste into the edit template html. The code will look something like this: http://i18.photobucket.com/albums/b103/cindydean65/blog/1JBaechtold_Thankful_BG1.jpg
In photobucket you will want to use the Direct Link code.
#2. After you have done all that, you will want to go into blogger and edit your template. Click on the edit HTML tab. Then look in the HTML for body { background:#ffffff;background-image: url This is where you will want to paste you code. This is how it should look when you paste your code:
body { background:#ffffff;background-image: url(http://i18.photobucket.com/albums/b103/cindydean65/blog/20sChic_JBaechtold_BG8.jpg);background-repeat:repeat-xy;
;background-repeat:repeat-xy){kind=link}
Make sure you have the repeat:repeat-xy in there because that will make sure it repeats the pattern. At this point, I would save you template and view it to see if you did it right. I did that and kept working on it until I figured it all out.
#3. Next you will want to do the outer wrapper the same way you did the background. When you paste your code, it will look like this: #outer-wrapper {background-image:url("http://i18.photobucket.com/albums/b103/cindydean65/blog/1JBaechtold_Thankful_BG1.jpg%22);background-repeat:repeat-xy;
;background-repeat:repeat-xy){kind=link}
Save it and check your template again. For this there is one extra step. You can adjust the width of this wrapper by changing the pixels. Look for this: width: 780px; If you want it wider or skinner, just change the number portion on this code. Each time you change it, save and check it out and see what you like.
#4. No go have fun making your changes. Send me a note and let me see what you've done if you use this. It's not to hard once you get the hang of where you should be changing the code. There are all kinds of adjustments you can make. Remember, I am no expert...I just played around until I figured out how to do it...
Comments