How to Upload Your Own Custom Background Image to Your Blog | A Step-By-Step Video Guide For Beginners

In the last post, we learned: "How to Set Up a Free Blog Site" (link will open in a new window)

Now that you have your very own blog site, you may want to customize it to match the look and feel that you desire.

There are literally thousands of ways to customize your blog, however, for this post let's learn how to change the background.



Step One:

Click play on the video below for a visual step by step guide:





Step Two:

Now that you have the custom image uploaded as the background, if you are happy with what it looks like, you must click the orange button saying: "Apply to Blog" to save the changes. Shown in the picture below:









Step Three:

If you are not happy with it, there are other options. These other options I highlighted inside a red circle in the picture below:






Alignment:

When you upload an image, it will automatically be repeated across your blog. Similar to the picture below:









The "Alignment" button shown in "Step Three" is the location of the image comparable to the rest of the screen. To see what the alignment option does, you need to click where it says "Title" (below the alignment option). When you click it, a drop-down menu with some choices appear. Choose "Don't Title" (shown in the picture below):






By default your custom image is now seen in the upper left-hand portion of your blog, like this:






To change the location of your image, click on the "Alignment" button and when the drop-down menu appears, choose the location you want your image determined by the icon option:








Play around with it until you get the result you want. Remember, the changes take place on your blog only after you click the orange button saying "Apply to Blog". The Blogger Template Designer is only a preview and doesn't affect the way your live blog looks until you apply it.



Titling Options:

If you want the image to repeat itself throughout the blog again, you can choose the option "Title" again. There are other options too "Title Horizontally" and Title Vertically".






You can have fun with these options too. For more options you can play with the different combination of both the alignment options and the title options.





Scroll With Page:




The checked option "Scroll with page":





Simply means the image will move with the page as you move down the blog. This option is set "on" by default. If you prefer to have the image remain fixed, uncheck this option.

When the image is not fixed (not scrolling with the page) the words of your blog will glide over the picture. In other words, it will look like the background is fixed and the words are moving on top of the background.

Simply uncheck this option and move the page to see the effect. If you don't like it simply check this option again.



Background Image Covering Full Screen:

If you want the image to have a full background without repeating itself throughout the blog, like this:





You need to resize your custom image to 1020px (pixels) width (wide) and automatically set the height that matches the width size of 1020 based on the original size of your image. In other words, if you change the width and you don't change the height to match, your image will be stretched and disconfigured.

I know it sounds complex, but it is easily done if you follow the instructions below...



Resizing Your Custom Background Image:

To resize your custom image and save it as a new image (so you don't lose the original size). Go to http://www.resizemypicture.com/ (link will open in a new window)

Follow these next steps:

  1. Click on the link above

  2. Click the "Browse" button (to choose your custom image)

  3. In "Step 2" where it says: "Choose Your Size by clicking one of the widths below"... click the small link just under that, it reads: "More Options>>>"

  4. Next a menu will appear with three choices, choose the last choice that reads: "Specify your own height and width"

  5. In the width box, type: "1020" and leave the height box empty

  6. In "Step 3" where it reads "Choose Quality" click on the arrow where it says "100%" and a drop down menu will appear with different percentages (100- 1), choose 90% (note: 100% makes the file size of the image too big to upload, the picture can only be 300 kb to set it as a background)

If you followed the instructions accurately up to this point you should see this:






7. Where it reads: "Final Step: Click the button below" click that button: "Click Here to Resize>>"

Wait for it to load. Once the image loads you must save it to your computer. Before you save the image, scroll down to the bottom of the image. You will see a file size just below the image. Make sure the file size is not over 300 kb. If it's over, upload the original image again and change the percentage to 80%.


8. To save the image to your hard drive, right click and select "Save Image As..." or "Save Picture As..."

Now click back to Blogger Template Designer and click the image down arrow to browse for your new resized version and upload it.



Last Steps:

  1. Choose the alignment option to be Center

  2. Choose the Title option to : "Don't Title"

  3. Uncheck the "Scroll with page" option

Your option results should look like the picture below:





You can experiment with different sizes and different images.Always remember to click the orange apply button to save the changes!

Have Fun!

Tutorial guide, pictures, and explanations by:
~Nicholas Powiull (add him to your Google+ circle)