How to Add a Blog Background
Go to the HTML page for your blog., Don't try to look for a separate image with a different color if all you want to do is change the background color., You will see the HEX number of the existing color instead of the X's displayed in the sample...
Step-by-Step Guide
-
Step 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. , 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 -
Step 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.
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. , There are many websites that allow you to download blog backgrounds or you can use an image that is already saved on your computer. -
Step 3: You will see the HEX number of the existing color instead of the X's displayed in the sample code.
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. , To do this you need to open the image in your Internet browser and copy the URL where it is displayed. , 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. , You should see the image added as the background. -
Step 4: Select the image that you want to add as the background.
-
Step 5: Upload the image.
-
Step 6: Get the image URL.
-
Step 7: Insert the code for adding an image as the background.
-
Step 8: Save the changes after you edit HTML and view your blog.
Detailed Guide
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. , 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
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. , There are many websites that allow you to download blog backgrounds or you can use an image that is already saved on your computer.
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. , To do this you need to open the image in your Internet browser and copy the URL where it is displayed. , 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. , You should see the image added as the background.
About the Author
Brian Cox
Dedicated to helping readers learn new skills in DIY projects and beyond.
Rate This Guide
How helpful was this guide? Click to rate: