How To Create A Beautiful Background For Your WordPress Post

by Costa on November 1, 2009

Now this is purely for pleasure only, but maybe on some occasions it could be useful. Having a beautiful background for certain post will bring out the mood for in your reader if you are targeting certain issues or maybe writing something romantic. For example if you are writing a love poem in your blog and you want to create a romantic feeling, having a backdrop like this will add to the atmosphere and the overall feeling of your poem. Individual post backgrounds will also serve to break the monotony of your whole blog and give tour frequent readers a refreshing change.

To create a background for any of your individual post, we have to first find an image that you like. Re size the width of your image to suit your content area. The height can be left alone. Once you have done that, upload the image to your Theme’s images folder.

Like always, we now have to add a new div class in our stylesheet to make the image appear the way we want to. For this example, my CSS codes looks like this:

.postback { background:#493105 url(images/sunset.jpg) no-repeat bottom center; padding:10px; margin: 0; font-family: Verdana; color: #fff; }

I have named ny div, .postback. The background color is decided by the top most color of your image. This means if you have a long post and your image is not too tall enough to cover your whole post, the background color will blend into the image. So make sure the color of the background is similar to the color of where your image height ends. “Bottom center” aligns the image to the bottom of your post. If you want the iamge to be on the top, then change it ti “top center”. The rest of the codes is pretty standard.

When writing your post, enclose the whole post within the new class like this:

<div class="postback"> Your whole post </div>

If you have named your div something else, change the word accordingly. Publish and see your final cool result. Try it, if anything just for the heck and fun of it. Cool. Beautiful background for your Wordpress post.

PS: Cannot be viewed via your feed reader.

Related posts:

  1. CSS Codes To Highlight WordPress Post Background Color. Highlighting certain part of your post will attract your reader’s focus on something important that you might want to relate in your post. This following piece of codes will let you highlight the background of your post like what you are seeing now Read more on CSS Codes To Highlight...
  2. Changing Background Color For Your WordPress Theme There are two backgrounds in a WordPress Theme. One is the overall background. If you have a fixed width theme, the color surrounding the contents is the overall background. The other is the content background. That is the background color that you see in your contents area. Changing the overall...
  3. How To Use An Image For Your WordPress Theme Background Festive season is around the corner and I thought it would be a good idea to usher in the mood a little bit early this year. For those who are into Internet marketing, this is the season for selling. The buying mood has started and I am already seeing...
  4. Align Image In Post WordPress 2.7 More than a year ago, I posted the stylesheet codes for aligning images in your WordPress posts. Times have changed and WordPress has added many new advanced features. One of them is the ability to align your images perfectly when you insert your image in your post editor. The only...
  5. How To Make Web Buttons Made myself some web buttons without using any background images. It is made possible by the latest standard in CSS called CSS3. However, till today, Internet Explorer does not support this. These tutorials have been around for quite sometime, so it is nothing new or innovative on my part. I...

Tagged as: Free WordPress Theme, Free WordPress Themes, WordPress Templates, WordPress Theme Modification, Wordpress Themes

Leave a Comment