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.
Contents
Steps
- 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.
- 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;
- 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
- 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.
- 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.
- 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.
- 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.
- Save the changes after you edit HTML and view your blog. You should see the image added as the background.
Tips
- When selecting a background image, try to add a blog background with small file size. Images that are too large can take a long time to load and this can be frustrating for your blog viewers.
Related Articles
- Blur the Background of a Photograph
- Add a Black Background to a Picture
- Blur the Background of a Digital Image
- Improve the Background of Your Photograph
