Add Background Color or Image in Blogger Posts Using CSS

Recently, one of my friend wanted to add different background color and image to each blogger posts, well, i helped him and now i would also like to share the tutorial with all of you, so that if you are in need of adding background color or image to blogger post then you can do it easily by following simple steps given below.

Also read : Customize Blogger Threaded/Nested Comments with CSS

How to change background color of the posts.

When you create a post, Switch to HTML mode near the Compose tab. and add the following code just at the beginning and at the end of your post content.


<div style="background-color: #DCC368; padding: 5px 8px 5px 8px;">
Your text goes here...
</div>

  • Add the red line at the BEGINNING of your post.
  • Add the div tag in blue at the END of your post.
  • Replace the part in green with your own color (Use our color code generator tool)
  • "Your text goes here...." is where the Post content goes

See the screenshot below for an example :

Add Background Color or Image in Blogger Posts

How to Add a background Image to Blogger Posts :


Add the following code just at the beginning and end of your post content.


<div style="background-image: url(IMAGE-URL-HERE); background-repeat: no-repeat; ">
Your text goes here...
</div>

  • In green, you need to paste the URL address of your hosted picture
  • The red line has to be added at the beginning of your post.
  • The blue part has to be added where your post ends.
  • "Your text here...." is where your Post content should be

Now click Publish and you are done.

You can edit your and apply this setting anytime to your already published posts Even you can change or remove later.

0 comments:

Post a Comment