How to Add a Background to Your Blog

This post will walk you through step by step how to add Backgrounds to your Blog for Blogger or WordPress. Simply choose the platform that you use and follow those instructions.

Blogger Background Tutorial

Using the Template Designer

  • If you are using one of the new themes from the Blogger Template Designer, you can simply click on “Template” from your Dashboard Menu, then click “customize” under your theme to access the Template Designer. Once you are in the “Template Designer” choose the “Background” link on the left side.
  • Under “Background Image” when you click on the small background thumbnail image, a box will pop up so that you can select your background. Simply click “Upload Image” then upload the background file and set it to “tile” so that it repeats endlessly. Just save it and you’re done. Super quick and easy!

Using Online Image Hosting

If you have a custom theme, if you are using an older Blogger template or if you prefer to work with the CSS directly, simply follow these steps:

  • Once you have your seamless background file downloaded to your computer, the first thing you need is a place to store the file online. You will need an online host such as Picasa, Flickr, or Photobucket.
  • If you don’t have an online photo host, I recommend Picasa for Blogger. The Picasa albums are fully integrated with Blogger and you can create multiple albums that are easy to navigate. To access Picasa, visit this link: www.picasa.google.com and sign in with your Blogger account information.
  • Simply create an album, upload your background file to the album and click on your newly uploaded background file. Once the image file is in view, right click on the image file and select “view image” or “view image property”. This will lead you to the image file property link.
  • You will need your file’s property link when you are editing your Blogger HTML. Select and copy the image property link, it will look something like this:

http://your-background-property-link/image-name.png

Editing Blogger HTML Code

  • In your Blogger Dashboard, select “Template”, then under your theme select “Edit HTML” and you will see the html and css for your blog template. First, copy your template html so that you have a backup for your template design. Then scroll down in your css coding and find the “body” code:

body {
background: $(body.background);
font: $(body.font);
color: $(body.text.color);
padding:0;
}

  • You are going to edit this code by adding your property file link to the background and telling it to repeat endlessly. After editing, it should look like this:

body {
background: url(http://your-background-property-link/image-name.png); repeat-xy;
font: $(body.font);
color: $(body.text.color);
padding:0;
}

  • Once this code is added, click “Save Template” and view your blog to see how it looks with your new background!

WordPress Background Tutorial

Using the Default WordPress Theme

  • If your theme is compatible with the WordPress 3.0 Background Function, you can click the “Background” link, located under “Appearance” in your WordPress blog, upload the background file and set it to “tile” so that it repeats endlessly.  Click “Save Changes” and you’re done. Super quick and easy!

Using Online Image Hosting for “Self-Hosted WordPress”

If you have a custom theme or prefer to work with the CSS directly, simply follow these steps:

  • Once you have your seamless background file downloaded to your computer, the first thing you need is a place to store the file online. With WordPress, you can store the image right on your blog or website. It’s much easier this way and your hosting space can hold a lot of images.
  • Once you sign into your blog, just click on “media” (this is located on the left towards the top – just under posts). Then click on “add new” this is the direct link: http://yoursite.com/wp-admin/media-new.php
  • Simply upload the background Image from your computer to your media library. Once it’s uploaded, you’ll see “file url” at the bottom of the image details.
  • You’ll need your file’s property link when you are editing your WordPress CSS. Select and copy the file url property link, it will look something like this:

http://yoursite.com/wp-content/uploads/image-name.png

Editing WordPress CSS Code

  • In your WordPress Admin, select “Appearance”, then select “Editor” and finally make sure you are viewing the “Stylesheet” file (style.css). First, copy your stylesheet CSS so that you have a backup for your template design. Then scroll down in your css coding and find the “body” code (it should be towards the top):

body {
background: #ffffff;
color: #222222;
font-size: 12px;
}

  • You are going to edit this code by adding your property file link to the background and telling it to repeat endlessly. After editing, it should look like this:

body {
background: #ffffff url(http://yoursite.com/wp-content/uploads/image-name.png); repeat-xy;
color: #222222;
font-size: 12px;
}

  • Once this code is added, click “Update File” and view your blog to see how it looks with your new Background!

Comments

Your email address will not be published. Required fields are marked *