Find us on Google+ Craft Blog UK - Tips for Selling Craft Online: Blogging Tip - Add a background colour to individual posts

Blogging Tip - Add a background colour to individual posts

HTML Background Colour Tutorial

This very simple tutorial will explain how to add a background colour to each of your posts.  Not the background of your whole blog but to each individual post or an area of your post.

Natural Sea Glass Pendant - Laura Cameron

Why is this useful?

  • Use a specific background colour to identify a weekly themed post such as Folksy Friday or Misi Monday. 

  • Give your certain posts a colourful background to catch peoples eye as they are scrolling through older posts.

  • Use the background only on certain parts of the post to visually seperate two topics or highlight an important point - just like the tutorial highlighted in light brown beneath.

  • Make a photo stand out by adding a contrasting background colour - like the one above.

  • Use them because they look great and can make your blog bright and multi coloured or match in with your craft 'brand' by using just a few colours to break up columns of posts.


    1. Write your post first including all the formatting - this way blogger will have added all the codes to the html - blogger has a tendancy to shift things around! Don't panic if you have to edit something afterwards, you can quite easily it's just for beginners it's easier to do little tweaks at the end to save all the code getting messy.

    2. Go to the 'Edit Html' tab in your post.

    3. If you are adding the background to the entire post then copy and paste the following code at the very top.

      <div style="background: #f7f7ce; padding-bottom: 6px; padding-left: 9px; padding-right: 9px; padding-top: 6px;">

    4. Next, copy this little piece of code at the very bottom        </div>

      Take a look in the compose tab or click on preview and you will see the effect - a brown background just like this one!
    I'll now explain what all the little parts of the code mean so that you have a better understanding of how to adapt it for your own use.

    • The div tag you see is short for division and just denotes the start of a section.  It is telling blogger to make everything after this tag in a specific style.  All html tags are closed by adding a back slash to the tag at the end, showing that this section is now closed, or finished.  So you can place the background at any point in your post.  I have given the tutorial section of this post a coloured background by adding the code above the word tutorial - remember you must 'close' the tag too or blogger will get cross and flash up messages at you!

    • Where you see it says "background: #f7f7ee - replace this with your chosen  background colour.  I use this website -

      The colours are written as "Hexadecimal Color Values Reference" you don't need to remember that though! Just that you need to pick a colour code which is the hash tag like this # followed by a combination of 6 letters and numbers ( #ffffff is white, #000000 is black) - just write down a selection of the ones that will suit your blog best or copy and paste them directly into your post's html code.

    • Padding - this just gives a bit of a margin around your post - so padding-top is the gap at the top before the text starts and so on - you  can adjust these to suit.

    I hope you enjoy using this, it's so simple and after a while of using it you'll find you start remembering all the colour codes too!  If you have any questions or would like to show me and everyone else an example of a post using this simple tutorial please do post a comment below.

    blog comments powered by Disqus

    AddThis Smart Layers

    Affiliate Window