How to show different background color or image for separate posts or paragraphs

To highlight a paragraph in a post, or to add a color to the complete post, like the one displayed, add these code lines to the post/paragraph.

<div style="background:#FFE1FF; padding:5px 8px 5px 8px;">
YOUR TEXT HERE
</div>

In place of #FFE1FF, put the hex HTML color code of any color as you like.




And to add a background image to the entire post or to any specific paragraph, use this code
<div style="background:url(URL/Direct link OF the Image) no-repeat;">
YOUR TEXT HERE
</div>
Blogger Help

ProBlogger - Inspiring Others Realize Their Dreams!

Share this

Related Posts

Previous
Next Post »

8 comments

Write comments
July 15, 2009 1:41 PM delete

Thanks! I have been looking to make some changes for a while. Great tip, I gave you a tweet.

Reply
avatar
July 29, 2009 1:02 PM delete

Is it possible to force your image to automatically stretch or shrink depending on the size of the post? I'm thinking you could use some code like 100% but I can't seem to get it to work.
Any ideas?

Reply
avatar
July 29, 2009 1:49 PM delete

In my blog, the post area width is around 575px, so I generally use images at 550-570px and I define the width of images every time I use any image depending on the original width of the images...

Reply
avatar
July 29, 2009 2:53 PM delete

Thanks Divya,
How do I define that. My issue is that the image I have is like a frame and I would like the height of it to stretch to the length of the post.

Reply
avatar
July 29, 2009 3:24 PM delete

In th above code, add height or width too, like this:

<div style="background:url(URL/Direct link OF the Image) no-repeat; height: 500px; width: 450px;">
YOUR TEXT HERE
</div>

You can make height/width as 100% too, but make sure that you maintain the aspect ratio, otherwise images will look horrible !

Reply
avatar
Jblack
July 29, 2009 3:52 PM delete

Thanks so much! You are a wizard

Reply
avatar

Comments are moderated on this blog

Allowed HTML tags: <b>, <i> and <a>

Comment Like This! and Optimize your blog EmoticonEmoticon

:)
:(
=(
^_^
:D
=D
=)D
|o|
@@,
;)
:-bd
:-d
:p
:ng