How to: Separate each post with an image

February 7, 2009 at 10:13 am

Yesterday I cam across a blog I didn’t knew yet, which have the particularity of using a nice horizontal image to separate each post. Let’s see how to do it in your blog. That’s really easy, just read on!

To achieve this recipe, you first need an image: You can grab one from this website which provide some excellent separation images.

Once you have it, upload it to your wp-content/themes/yourthemes/images directory, open up your index.php file, find the loop and make sure that each post is embedded throught a <div class=”post”> tag. This is the case on most themes.

Then, edit your style.css file. Find the following line:

.post {

And paste this code:

background: transparent url(images/yourimage.jpg) no-repeat bottom;

That’s simple as that! Good weekend to all of you!