How to Set the Featured Image as a Background Image in WordPress
May 10, 2016 By Andrew Gehman
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.
Cool! Thanks for the tutorial! Were did you put this line?
ID), ‘full’ );?>
In the functions or?
Thanks!
-John
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.
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.
Never mind, I figured it out. But I cannot get custom size to work. 🙁
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.
Yes, it’s possible. You need to create a PHP loop to loop through the divs and set the background image in each one.
Would this work with Page templates too?
Yes, as long as your theme supports post-thumbnails.
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.
is it possible to add this in an external css file instead of inline?
Hi!
Thanks for the tutorial! Could you please giv a hit, how to make this background image responsive?
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.
“The picture will look better” is subjective and depends on the image.
How can i show featured image as background image in wordpress particular post is It’s not happening pleas help me…
Sorry, I’m not sure what you are asking. Can you clarify?
Hello!
Thanks for the tutorial, really helpful.
But, I couldn’t get the image to be full width despite modifying this line thus: <div class="header-wrap" style="background: url('’) no-repeat; background-size: cover; background-position-x: center; background-position-y: center; width:100%”>
any ideas?
Based on what you’ve posted, the background url is empty so I’m not sure how the background image is even being displayed at all.
It’s a PHP snippet, the form stripped it
Ah, thank you, that makes sense. I don’t see any issues in your code. I could only guess perhaps a conflicting style declaration somewhere else in the code or parent element preventing it from displaying full width?
Nice tutorial. But how can I set different picture size for different devices?
For example, I’d like on PC monitor “full” picture size but on mobile “thumbnail” size as a background.
Regards
I would suggest looking at using a img tag (not a background-image) with some css positioning to set it to the background and utilize the srcset and sizes attributes to determine which image to display at which screen size.
Hi
This looks like the place i can find some clarity. I have a featured image on the top of most pages in wordpress and i want them to have an alt tag. At the moment they are set as background images in my theme.
1. Whats the difference between Featured and Background?
2. How can i change background:url(https://www-embarkboathire-com-au.exactdn.com/wp-content/uploads/2017/08/EBH-Parties.jpg?lossy=1&ssl=1) top center; to a normal image with alt tag.
Many thanks
Danny Kirk
Hi Danny,
A featured image is a WordPress feature that allows you to define an image (or thumbnail) that represents a page or post. A background image is a css property that allows you to set a background image for an HTML element.
You could use the WordPress the_post_thumbnail() function in your theme file. You would probably want to either remove the background image from the css or possibly the element with the background image itself from the template and use the_post_thumbnail() instead.
Hope this helps.
Hi Andrew
Cant thank you enough for getting back to me. This is the css i found which i think is the one i need to change.
* 7.1.4 – Full Width Message */
.full-width-message-wrapper {
background: url(“../images/image3.jpg”) no-repeat center top;
width: 100%;
color: #fff;
padding: 80px 0;
}
This is the php i found in function.php
.pp_close {
background: url(“‘ . get_template_directory_uri() . ‘/framework/images/close.png”) no-repeat center ‘ . $main_color . ‘;
}
Ultimately its the same image i want to use just as featured not background.
Thanks again
Danny
work on my site … thank’s Andrew
works perfect, thanks
Can we do the same using some plugin? Please let me know.
Or
Please help me to understand exactly where show I post the block of code.
Please 🙏
Hi Ajay,
There may be a plugin, but I am not aware of one offhand. The html & php would go in your theme’s template file(s) for the page in which you want the image to appear. The CSS would go into the theme’s stylesheet. If you aren’t sure which file you need to edit for your particular needs, you may need to refer to the WordPress Template Hierarchy Chart.
Hi,
The full code is right, but in the first part you have the no-repeat inside the php call and it gives an error.
Once I discovered why, it worked a treat, so thank you for your help.
Nice catch! Thank you. The first code block has been fixed.