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




| 6 comments

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.

Add background image behind text

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.

<table border="0" background="http://3.bp.blogspot.com/_rKG-ziTSNUQ/TAdpt162J2I/AAAAAAAABX4/o8IfBmkpHJA/s1600/yellow-rose-800.jpg"><tr><td>THE TEXT FOR THE PARAGRAPH GOES HERE</tr></td/></table>


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 :

<table border="0" background="http://3.bp.blogspot.com/_rKG-ziTSNUQ/TAdpt162J2I/AAAAAAAABX4/o8IfBmkpHJA/s1600/yellow-rose-800.jpg"><tr><td>

All the text for your entire post goes here.

</tr></td/></table>


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

InfoRemember 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 ?


Join over 5000 Subscribers! Please sign up to receive Updates.

SUYB has its Focus on Quality. If we post Crap, you can unsubscribe.

No Spam and No Garbage! - Use RSS, Twitter & Facebook as an Alternative


If You Enjoyed This Post Please Take 5 Seconds To Share It.

6 comments:

  1. Great idea thanks for the tutorial.

    ReplyDelete
  2. Great for making a more fluid page for better browser support. Thank you this was very helpful. Your text follows the image when using this method instead of going random places when switching browsers.

    ReplyDelete
  3. Is it possible to use a background image for paragraphs?

    ReplyDelete
  4. Great tutorial. This would be very much helpful to design post of blog with matching topics. Thanks for sharing.

    ReplyDelete



Important - If you ask a question make sure you tick the "Notify Me" box below the comment form to be notified of follow up comments and replies.


Hire Us