How to Set the Featured Image as a Background Image in WordPress

Let’s say we’re building a site for a client who would like to have a background image behind the title of their blog posts. That’s easy enough. Just set a background image on the containing div with CSS.

.header-wrap {
  text-align: center;
  background:url('../img/augusta.jpg');
  padding: 40px 50px;
}

How to Set the Featured Image as a Background Image in WordPress

What if the client wants the ability to select a custom background image for each blog post? Perhaps the client wants to use the Featured Image of the post as the background image behind the title of the blog post (much like the image below), and they would like to be able to do this on their own through the WordPress admin area.

background image

This is how we can go about meeting the needs of the client.

Note: We’ll assume that featured images (or ‘post thumbnails’) are enabled in our theme, which is pretty standard functionality for WordPress themes. If we are building our own, we’ll want to include add_theme_support( ‘post-thumbnails’ ); in the functions.php file for our theme.

1. Edit Template Files Used to Display Individual Blog Posts

What we will do is edit our template file(s) so that the Featured Image is displayed as a background image with inline styles. In our case, we’ll edit the single.php file which is used to display individual blog posts. We have the post title being displayed in an h1 tag, which is wrapped by a header element and a div element. We’ll add our style to the wrapping div with the class of “header-wrap.”

<div class="header-wrap">
  <header class="entry-header">
     <h1 class="entry-title"><?php the_title(); ?></h1>
  </header>
</div>

2. Retrieve the Featured Image

First, we need to retrieve the featured image. We’ll do this by using the wp_get_attachment_image_src function. This function requires that you pass in the id of the image as a parameter, which we will get with by using the get_post_thumbnail_id function. We will include the id of the post as a parameter for get_post_thumbnail_id (which we retrieve using $post->id), even though in this case,  we’d still get the desired result if we didn’t include it. The second parameter is the size of the image. The default is ‘thumbnail,’ but we want the full size of the original image, so we use the keyword of ‘full.’ For a custom size, pass in an array, something like array (600, 200), which would be 600 pixels by 200 pixels.

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

The wp_get_attachment_image_src function returns an array that includes the url of the image, the width in pixels, the height in pixels, and a boolean, true if the image has been re-sized, or false if the image is original size. We’ll use a variable named $backgroundImg to hold the returned results.

All we really need for our purposes is the url of the image. It’s the first item in the array, so we’ll reference it like so:

$backgroundImg[0]

3. Add the Background Image

Next, we’ll add our background image using inline CSS with a little PHP to echo out the background url. (You could also use the background-image CSS property instead of background). I’ve also added no-repeat to the inline style to prevent our image from displaying more than once.

<div class="header-wrap" style="background: url('<?php echo $backgroundImg[0] no-repeat; ?>')">
  <header class="entry-header">
     <h1 class="entry-title"><?php the_title(); ?></h1>
  </header>
</div>

4. Use CSS to Adjust the Display

I’ve added a bit more CSS to make our title display a little bit better over the background image.

.header-wrap {
  text-align: center;
  padding: 40px 50px;
}

.header-wrap h1.entry-title {
  font-weight: 400;
  color: #FFF;
  font-size:3em;
  line-height: 1.2em;
  text-shadow: 1px 1px 2px black;
}

Full Code Block to Set the Featured Image as a Background Image in WordPress

And here’s the full code block that you place in your template file. In our case, the template file is single.php because we want this effect on single blog post pages, and our theme has a single.php file. If you aren’t sure which file you need to edit for your particular needs, refer to the WordPress Template Hierarchy Chart.

<?php $backgroundImg = wp_get_attachment_image_src( get_post_thumbnail_id($post->ID), 'full' );?>
          
  <div class="header-wrap" style="background: url('<?php echo $backgroundImg[0]; ?>') no-repeat;">
     <header class="entry-header">
  	<h1 class="entry-title"><?php the_title(); ?></h1>
     </header>
  </div>  

Now, you should have the featured image of the post displayed as a background image. If you’re putting effort into your blog posts, then it makes sense to integrate them into other areas of your website. Depending on your customers and business, this could be on the homepage, specific product or service pages, or another area. If you want to show them on the homepage, this tutorial will tell you how to display recent blog posts on the homepage in WordPress.

13 responses to “How to Set the Featured Image as a Background Image in WordPress”

  1. Hi John,
    That would go in the theme template file where you want the image to be displayed. Assuming you want it displayed on individual blog posts, it would be single.php. I’ve updated the post to hopefully provide a little more clarity.

  2. Thank you for this. Would it be possible to center the background image from every direction? I only want wide and short part, and now it only shows upper left corner.

  3. Is there any possible way to pull in a blog post into a div, then use the featured image from that blog post to set the background image of the div?
    Example:

    Pull a 4 blog posts into 4 divs on your home page and use the featured mage from each separate blog post as the background mage for each corresponding div. I can’t believe how often I see tis on websites and I have never seen a good tutorial for it anywhere.

  4. Hi, brilliant, and works perfectly. One question: how would I set a default image if a particular post within a loop doesn’t have a featured image? A client of mine has several posts which do not have a featured image, so where I’ve used your tips in this article, nothing shows at all (obviously) for those posts that don’t have a featured image.

    • Other than actually setting a featured image for those posts, you could write a basic if/else statement that inserts a fallback image if the featured image doesn’t exist.

  5. Thanks, Andrew for the post. And I will add a little:

    <div class="header-wrap" style="background: url('’) no-repeat; background-size: cover; background-position: center;”>

    With this added code, the picture will look better.

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.