Featured Background Images in WordPress

In this tutorial I will be showing you how to take your featured post images a step beyond the typical usage of a static image block. We will be using our featured image as a custom background graphic.

Adding Thumbnail support to your theme

<?php add_theme_support( 'post-thumbnails' ); ?>

Head over to your functions.php file and insert the short snippet above. You should now see this box in the lower right corner or your “Add New Post” page in the WordPress dashboard.

Calling Your Featured Image URL – In The Loop

<?php $image_id = get_post_thumbnail_id(); ?>
<?php $image_url = wp_get_attachment_image_src($image_id,'small');   ?>

Open the template file you want the featured image to appear (remember this can go anywhere within a loop).

Using the Featured Image Function

<?php echo $image_url[0]; ?>

Simply use this tiny snippet anywhere within your loop to display the image source of your featured image. Just remember that this snippet only generates the SOURCE URL, not the actual image.

Now For The Fun Part

The Markup

<a class="feat_img" href="#" style="background-image:url(<?php echo $image_url[0]; ?>);"></a>

With the ability to add the Featured Image source URL at will, we can add it as a background image to any element within the loop. Here we’ve assigned a link element with our featured image as it’s background graphic. Of course without some fancy CSS3 to go with it the link looks awful…

…So Pretty It Up

.feat_img {
      margin:0 0 15px;
      width:264px;
      height:155px;
      border: solid 3px #fff;
      box-shadow: 0px 3px 4px rgba(0,0,0,.3);
      transition: all .5s ease-in-out;
      -moz-transition: all .5s ease-in-out;
      -webkit-transition: all .5s ease-in-out;
      background-position: center center;
      display:block;
}

.feat_img:hover {
      height:300px;
      opacity:0.7;
}

See It In Action

Pretty sweet trick right? I’ve used this trick on my homepage as a way to slowly reveal more of the image upon hovering the post link. Of course you can go wild with this and do just about anything you want.

I’d love to see what you come up with, send over demo links in the comments section!