Use A Background Image On Paragraphs Of Text Or Full Blog Posts

It's amazing how many posts on Spice Up Your Blog are now published in reply to comments and Emails from the readers.While I'm constantly working on ideas for posts and code or methods to bring them posts to life a simple comment will ask a question and i have a 'light bulb idea' moment.Basically You guys rock so keep asking questions and i will try to keep answering.

This post is in reply to a question in the comments for the How To Add A Background Image Behind Blogs Posting Area post, the post as the title suggests shows you how to have a background image on all your posts.The comment by Zahid asks : "I would like to place an image behind text for a specific post. how can it be done ?" and the answer is it can be done and we are going to see how.There are a few ways this could be done but the easiest technique would be using the table attribute.

In this post i will show Zahid and all you guys how to have a background image for a specific post and how to have a background image for just a piece of text in a post.So if you want to have an image behind just one paragraph you can also do that...Cool ehh.



So lets first look at using a html table to have a paragraph of text with a background image.We will then see how to have an entire post with a background image.

How To Have An Image Behind Text

As you can see this paragraph has a yellow rose as a background.You can use any image for a background but it is important the image has the right colors to work.You could off course change the text color if for example you wish to use a dark background image you can change the text color to a brighter color.As this is only a paragraph you dont really get the full effect of the rose so image choice is also important.Here is the code i used to make this paragraph.

In the code below the image URL is highlighted in red and the text is highlighted in blue.So by copying the code and changing the image and text you will have your own text with a background image.

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEis5Kwa-dIzERUAXlt1QYWL6QMkK7lzOFzdeaFYnWGYRtIHuZFLz3QECp9jgZHMKJS8P5Ohle91sim7Dprf_hudWNos1nbOL4UH_RhRa-DcImNl1__u518ImTwrllF5sXiq3LXW3e-vX_Q/s1600/yellow-rose-800.jpg">

THE TEXT FOR THE PARAGRAPH GOES HERE

How To Have A Full Post With A Background Image

How is it done ? In fact we do it the very same way using the very same code as the paragraph, instead of placing the code around a paragraph we add the code around the entire post.I have created two posts on a test blog to show you the result check them out.

Example one using the yellow rose : Go To Demo

Example Two Using An Orange Peel : Go To Demo

Here is the code for the post with the Yellow Rose background :

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEis5Kwa-dIzERUAXlt1QYWL6QMkK7lzOFzdeaFYnWGYRtIHuZFLz3QECp9jgZHMKJS8P5Ohle91sim7Dprf_hudWNos1nbOL4UH_RhRa-DcImNl1__u518ImTwrllF5sXiq3LXW3e-vX_Q/s1600/yellow-rose-800.jpg">

All the text for your entire post goes here.

So to sum up just copy the codes i have provided and change the image URL in red and the text in blue.

Remember you can get all these tips sent directly to your email and stay a step ahead.Its a quick and easy service Provided for Free by Google.Just fill in the Email form below the post.If you need extra help on this or any tutorial just leave a comment, I love comments and feedback so this Blog is Do-Follow - when you comment here it helps Your Blogs Google rank !

So yes it's that easy and i think this trick could really add some spice to your blog.Go crazy and have a different background image for every post :D

Thanks to Zahid for the question and if you have any questions drop a comment or use the contact me link in the top menu bar to send me an Email.Remember you can find out how to have the same background image automatically on all your posts by checking out this post Image Behind All Blog Posts.

What do you think will you try out some background images on your blog posts ?