Today I’m going to show you how to easily add an image behind your blog post title. It’s a great way to add another personal touch to your blog. For this tutorial I’m working with blogger, however you can do this with any blog platform, the coding might just be slightly different. Anyway, this is what we are going to end up with:
I added a green ribbon image behind the blog post title
Step 1: Decide what type of image you’d like to go behind your text. I chose to make a green ribbon. In my opinion, the most difficult part of adding this feature to your blog is making sure the image is the correct size.
Since adding this piece of code will insert the image behind every one of your post titles, you’ll want to take into consideration how long your titles usually are. In the blog I used for this tutorial, my titles only consisted of “Day 1, Day 2, Day 3,” etc. So the ribbon didn’t need to be that long. Try a few images out and see what size works for you.
To give you a general basis, The image in my sample was somewhere around 240 pixels wide and 40 pixels high.
Step 2: Create your image. While making your image also take into consideration what color text your titles are, you don’t want them to blend in too much. I use Adobe Illustrator to create my images but if you don’t have a program you typically use I would suggest picmonkey.com It’s a great free website that allows you to create and edit photos.
This is my image:
When your image is complete you have a few options as to how to save it. If your blog background is white then it’s okay to save it as a jpeg. However if your background is a color or texture you will have to save it as a .gif or .png This makes the background transparent.
Step 3: Upload your image to a site like photobucket.com or imageshack.com, or any other online image hosting website. Make note of the image URL.
Step 4: Open up your html template editor and expand the widgets. (Template > Edit HTML > check expand widgets box) It will look something like this:
You’re going to want to click Control + F to find the following line:
(your line may vary, however as long as it is the line that controls your blog post title, this will still work)
Directly underneath this line insert the following:
background-image: url(‘YOUR IMAGE URL’);
Step 5: Preview your changes and then click save template. Now when you refresh your blog you should see your image showing up behind your post title.
**If you’re background isn’t lining up right, play around with different size images to find one that works best for your blog.**