Customize Your Business Blog!
As you construct and become more familiar with your blog, you may find yourself wondering how you can spruce up your blog’s appearance to create more visual interest for your readers. By adding a background image to your business blog, you can make it significantly more pleasing to the eye. In this blog post, I will show you how to add HTML code to one of your widgets that will allow you to change the background of your blog.
Acquire a Background Image
The first step that you need to take is to acquire the background image, and then decide what its size will be. I would recommend that you find an image that can be repeated (in a tile formation) so that it can appear as one big image. Once this image has been chosen, upload it to your Media Library, where you will be able to copy the file URL for the image. This action is very important, because if you choose not to upload the image to your Media Library, then it’s very possible that the image will appear as a broken link or even a box with an ‘x’ in it. You can access the file URL for that image by going to your Media Library and clicking on the image that you want to add. Once you have done so, the “Edit Media” screen will pop up and you will see File URL at the bottom of the page.
Configuring Your Text Widget
Next, set up your Text Widget by clicking on “Appearance” and navigating to your Widgets page. Drag the Text Widget to the bottom of your sidebar to the right, making sure that it appears as the last one on the list.
Adding the Text Widget to your sidebar will bring down a drop down menu for that widget. Notice that you have a spot for a title and also a big box for text or HTML. There is no need for a title, since the action that we are performing here is solely intended to change the background. Copy the following HTML code and paste it into the larger box in the Text Widget:
<body style=”background-repeat: no-repeat; background-image:url( ‘MEDIALIBRARYFILEURLHERE‘); background- attachment: fixed;”>
In the HTML code above, you will note the example phrase “MEDIALIBRARYFILEURLHERE” Delete that example phrase, but leave the quotation marks. You will want to paste the File URL that you copied from your Media Library between these remaining quotation marks. Click “Save” at the bottom of the Text Widget, and then check out your blog to see how it looks!
You can also alter the code a little bit by taking out the “no” in “no-repeat,” which will just make your image repeat itself. Be sure to let us know how it works out for you and to share your new blog backgrounds with us.
- Happy Blogging!
