How to Add a Blog Background

Bloggers usually change blog backgrounds to make their blog more visually appealing for visitors. However, a background image that is added incorrectly can confuse the viewer and cause visitors to browse away from your blog. To add a blog background correctly it is important to use the correct HTML codes.

Steps

  1. Image titled Add a Blog Background Step 1
    1
    Go to the HTML page for your blog. If you are editing your blog offline then you can open it in Dreamweaver to change HTML. Blogging services like Blogger allow you to change HTML online by going to the Design page and selecting the "Edit HTML" tab. You need to be able to access the HTML codes for your blog, and how you do this can vary greatly depending on what blogging services and methods you use.
  2. Image titled Add a Blog Background Step 2
    2
    Don't try to look for a separate image with a different color if all you want to do is change the background color. Instead, you can just edit your HTML to change the existing color to the one that you want.
    • Search for "HTML color chart" on the Internet. You should be able to find a table that displays different colors along with their color name and HEX (Hexadecimal) number. The HEX number is the number used within the HTML, so you need to remember the HEX number for the particular color that you want as your background.
    • Find the code on your blog that defines the background color. It will look like this.
      • body {
      • background-color:#XXXXXX;
  3. Image titled Add a Blog Background Step 3
    3
    You will see the HEX number of the existing color instead of the X's displayed in the sample code.
    • Change the HEX number to the number for the color that you want as your background. After you save and apply the new HTML, you will see the new color as the background.

Adding a Blog Background Image

  1. Image titled Add a Blog Background Step 4
    1
    Select the image that you want to add as the background. There are many websites that allow you to download blog backgrounds or you can use an image that is already saved on your computer.
  2. Image titled Add a Blog Background Step 5
    2
    Upload the image. Photo hosting websites such as Picasa, Flickr and Photobucket allow you to upload images for free. Your blog hosting service may also allow you to upload images in a similar way to how the rest of your blog is hosted.
  3. Image titled Add a Blog Background Step 6
    3
    Get the image URL. To do this you need to open the image in your Internet browser and copy the URL where it is displayed.
  4. Image titled Add a Blog Background Step 7
    4
    Insert the code for adding an image as the background. Here is the HTML code.
      • body {
      • background-image: url(image URL);
    • You need to add the code where the body of your blog HTML begins. Replace "image URL" with the full URL where your image is located.
  5. Image titled Add a Blog Background Step 8
    5
    Save the changes after you edit HTML and view your blog. You should see the image added as the background.

0 comments:

Post a Comment

 
Design by Wordpress Theme | Bloggerized by Free Blogger Templates | coupon codes