Blogger Tutorials for everyone: Add a background image to an individual post.

Your opinion is needed with a new "FAQ" I'm thinking of writing up. Click on this "FAQ link" now and leave a comment if you can spare the time.

Tutorials : How I made it •toolbars • paginations • buttons • widgets • tweeks • mega tweeks • everything else • inspiration • ideas • FAQ • problems • Fixing problems

Add a background image to an individual post.

Thursday, July 26, 2012 at 1:01 PM

Sometimes we just want to do something different and adding a background image to an individual blog post can style the post. The background image itself can compliment the visual effect of the post content, giving it more appeal to the readers, or yourself. So here is the code for adding a background image to an individual post.

<div style="background: url(http://3.bp.blogspot.com/-o4B2M3HfsjE/T1sigHTffNI/AAAAAAAAF7o/Jq4gPyA6pb4/s620/798px+wide.jpg) #000 no-repeat; color: white;padding:5px;"> ADD YOUR POST TEXT AND OTHER THINGS YOU WANT TO ADD TO YOUR POST HERE</div>

Just change the background url for your own and change the colour of the text to your own colour. Don't forget, this code is supposed to be added to the "Edit HTML" section, not the "Compose" section of your blog post.

If you have a really big picture you want to use as a background, like this one I am using, it is best to write a fairly long post so all the image shows up. Have fun!

0 comments:

Comment Rules/Features ▼

Your Answer Thanks for contributing an answer to Blogger Tutorials for everyone! Please make sure your answer is NOT a SPAM comment, as such comments will be deleted. Provide details and share your research. Avoid statements based solely on opinion; only make statements you can back up with an appropriate reference, or personal experiences. Comment Options to add to the form below:
Of course, you can add various combinations of the above to your comment as long as you place the ending tags in the right locations.

Features:

To change your text to bold simply type in a left facing arrow then a UPPERCASE letter b then a right facing arrow. Then add your text, followed by typing in a left facing arrow, then type in /B and then a right facing arrow.

To change your text to italics simply type in a left facing arrow then a lowercase letter i then a right facing arrow. Then add your text, followed by typing in a left facing arrow, then type in /i and then a right facing arrow.

To change the colour of your text type in [co="red"]Add your text here[/co] You can change the colour of the text by either typing in the colour's word or by adding a hex colour code that includes the hash symbol.

Your text goes here. To add a marquee text type in [ma]Add your text here[/ma]

To add an image or gif type in [im]Add your image or gif URL here[/im]

Of course, you can add various combinations of the above to your comment as long as you place the ending tags in the right locations.

To add a Youtube video as a comment use either one of the two codes below and replace the video url with the one you want to add as a comment.
[video=ADD-ENTIRE-VIDEO-URL-THAT-YOU-VIEW-ON-THE-WATCH-PAGE-ON-YOUTUBE-HERE]
[video=ADD-ENTIRE-VIDEO-URL-THAT-YOU-VIEW-ON-THE-watch?feature=player_detailpage-HERE]