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.
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.