Creating Your Own Blog Background

EDITED TO ADD (as of 8-31-10):  Blogger has changed the way it does templates and blog backgrounds.  Because of this my instructions aren't effective and will only confuse you more.  Sorry about that.  If I get it figured out and have time to write up some new instructions I will do so - but don't hold your breath for now....sorry about that.



(Anything that is in this font is information I have found on other websites.)

Ok - I have had several people email me, or ask me to share how to change their blog backgrounds.  I feel foolish sharing these tips because I'm not very good at explaining things, and quite frankly - don't know what I'm doing myself! (a LOT of trial and error!)  But here we go.  I have referred to a couple of other blogs that have directions too.

These directions are the best I've found:  http://nicoleyoungdesigns.blogspot.com/2008/12/customize-your-blogger-page.html

Some other good ones are found here:  http://www.thecutestblogontheblock.com/secret.php?id=2

After reading my personal instructions be sure to go to those websites - they are more technical and will better explain things.

Background:

1. Create the background in Photoshop.  The size I use is 1700 x 1320 pixels at 72 resolution (I've tried other sizes and have messed it all up.  I know there is a techical way to figure out the right size - but I made mine too big, rather than too small.  A lot of the sides, top and bottom of my background don't show up on my computer because my monitor is smaller, but more shows up on our bigger monitor I have at work).  I design it like a scrapbook page using the kits and elements I have purchased in the past. Make sure that you leave the center section light enough that your text will show up, and wide enough that you'll be able to see the text.
2. I save my project as a jpeg file and upload it to http://www.photobucket.com/   Make sure that you choose the 1 megabyte size for uploading for it to be big enough.  Otherwise photobucket will condense your background and it will be too small. 
3. Then follow the instructions online in this link for changing the background.  (I did it the first time and basically I just go back and change the code each month with the link I have uploaded to photobucket when I change the background....I hope that makes sense).  This involves copying and pasting the direct link from photobucket.  Make sure you save what you've done on your blogger site. 
4. I'm including what you'll see in the previous link:

Once your background uploads, you'll find it down with your other images, and you need to copy the option 'direct link', see below:

With your image copied, you'll need to follow these specific instructions as to how to apply it to your blog:

Log in to your blog.

Next go to 'customize' then 'layout' then 'pick a new template' then choose a minima template.

Then click on 'edit HTML' You'll see a crazy code with a bunch of funny signs, scroll to where you see this:

body {
background:$bgcolor;
margin:0; color:$textcolor; font:x-small Georgia Serif; font-size/* */:/**/small; font-size: /**/small; text-align: center;

Change that part of the code to say this:
body {background:$bgcolor;background-image:url(direct link);background-position: center; background-repeat:no-repeat; background-attachment: fixed;

margin:0; color:$textcolor; font:x-small Georgia Serif; font-size/* */:/**/small; font-size: /**/small; text-align: center;

Now, use the direct link from your photobucket image and insert it between the parentheses.

Then Click SAVE!

CONGRATS! You've done it!!!! WOOO HOOO!

Topper:

1. I also create my blog topper using Photoshop.  The size of the one currently on my blog is:  600 pixels X 400 Pixels at 72 dpi.  This is also saved as a jpeg file.
2. Then I follow these instructions that can be found here.  This is what it says on that blog:
• Next scroll down until you find the portion of the HTML that says header-wrapper. There is a line of code that says border. Delete the entire line of code. The line of code starts with the word border and ends with a semi-colon.
  
  Scroll down a little further and you will come to header. Again delete the entire line that says border.
  
  These two steps delete the 2 small gray lines that are at the top of your blog that surround your header area.
  
  The last part of the HTML that we are going to edit is the width of the outer-wrapper and header-wrapper. We need to change both of these widths to 700px. (Right now they are set at 660px). Once you have changed those two lines. Your blog template is done. Save the changes and view your blog.
  
  Step Three: Custom Header
  Go to Layout> Page Elements
  and edit the Header.
  Upload your header from your computer. And choose: Instead of Title And Description.

Ok - I hope any of this makes sense.  Really I play around with it for a long time every time - trying to find what will work just right....I'm the furthest thing from an expert - I just work at it a lot.  So good luck!

---

Windows Live™ Hotmail®…more than just e-mail. See how it works.