WordPress’ featured images/post thumbnails are great, but if you’ve done any development that requires a background image instead of a static image then you’re going to need the URL for the image and not the pre-tagged image. You could do this with JS, like I had done for a while, of you can use one of WordPress’ built in hooks to make this happen:

wp_get_attachment_url( $id );

This method works just fine – it’ll grab the URL of an asset grabbable by WordPress. In the case of having it grab the URL of a featured image, we’ll need to add the following to the loop:

<?php $featuredImage = wp_get_attachment_url( get_post_thumbnail_id($post->ID) ); ?>

The above will create a variable with the attachment URL for the thumbnail associated with the current post ID ($post->ID). With that variable in place, echo where needed. For example:

<div style="background:url(<?php echo $featuredImage; ?>) no-repeat;">This has a background image</div>

This will add the URL for the featured image to the above div’s background CSS selector. In terms of how a loop could look using this method:

<?php
    query_posts();
    while (have_posts()) : the_post();
    $featuredImage = wp_get_attachment_url( get_post_thumbnail_id($post->ID) ); ?>

    <h1><?php the_title(); ?></h1>
    <div style="background:url(<?php echo $featuredImage; ?>) no-repeat;">Background Image</div>
    <?php the_content(); ?>

<?php endwhile; wp_reset_query(); ?>

Highlighted are the snippets mentioned before. As you can see, it’s easy to do this as long as you have some foresight into what you want to do before doing it. the only con to this method is that it will return the URL what EXACTLY what you set as the featured image which could lead to asset bloat.

wp_get_attachment_image_src( $attachment_id, $size, $icon );

This method is more precise, allowing you to define the size you want to export as well as returning an array of data that you can work with. Using this is a little more wordy than wp_get_attachment_url, but it gives you much more flexibility. Below is how you would go about grabbing the array:

<?php $featuredImage = wp_get_attachment_image_src( get_post_thumbnail_id($post->ID), 'thumbnail' ); ?>

The above will grab an array for the current thumbnail (get_post_thumbnail_id($post->ID)) for the thumbnail image size, as resized by WordPress. If for any reason you have a different size than what WordPress has automated, you can replace the text string for $size with an array of two values: array( X , Y ), for example: wp_get_attachment_image_src( $attachment , array(150,300) ); which will return the image URL for the featured image resized to 150×300.

Since this method returns an array, you will need to declare which value in the array you want to use, when you echo it. Per the Codex:

  • [0] = URL
  • [1] = Width
  • [2] = Height

Example usage in an <img> tag:

<img src="<?php echo $featuredImage[0]; ?>" width="<?php echo $featuredImage[0]; ?>" height="<?php echo $featuredImage[0]; ?>" />

Usage in a Loop:

<?php
    query_posts();
    while (have_posts()) : the_post();
    $featuredImage = wp_get_attachment_image_src( get_post_thumbnail_id($post->ID), 'thumbnail' ); ?>

    <h1><?php the_title(); ?></h1>
    <div style="background:url(<?php echo $featuredImage[0]; ?>) no-repeat; height:<?php echo $featuredImage[2]; ?>; width:<?php echo $featuredImage[1]; ?>;">Background Image</div>
    <?php the_content(); ?>

<?php endwhile; wp_reset_query(); ?>

Unlike when using wp_get_attachment_url, this method allows you to also set the height and width of your element without the need for a CSS class – if that’s your thing or if you find that beneficial. I prefer using this when predefined height and width are imperative and other surrounding elements may be associated with the dimensions of the featured image, or if I want to avoid asset bloat.