There are a number of approaches to the question of background images in WordPress.
If you just used positioning (or possibly grid) to put the text on top of the image (centered, of course), you will have the advantage of that box getting its dimensions from the image itself. In this case, you would just output the feature image normally with the_post_thumbnail().
However, if you decide that you need to use a background image rather than outputting the image inline, here’s a couple ways to do it:
PURE CSS:
put it in the theme folder, presumably in an images folder, and then load it via css, using a path relative to the compiled css file.
USING PHP and INLINE CSS
First, make a variable to save the url of the feature image: $featureImgURL
Then find the URL. We can get the URL of any image in a post, including the feature image, using wp_get_attachment_image_src()
As part of calling that function, however, we need to pass the ID of the image we want. We can do that with get_post_thumbnail_id().
So to get the URL of the feature image, do the following
wp_get_attachment_image_src(get_post_thumbnail_id(), ‘full’);
So the first argument given to the wp_get_attachment_image_src function is the dynamically-updated URL of the feature image. The second argument passed to the function is the size we want (in this case, full).
This will return an array. The first value in the array is the URL of the feature image. I think the next ones are database IDs, and maybe sizes.
Anyway, you can get the url value by referring to the first place in the array: $featureImgURL[0]
Note: that is a zero in the array.
You could then use this variable to add inline CSS in your template file like this:
<?php
$featureImgURL =
wp_get_attachment_image_src(get_post_thumbnail_id(), 'full');
echo $featureImgURL[0];
?>
<div class="whatever-you-want-to-call-this"
style=
"background-image:url(
'<?php echo esc_url($featureImgURL[0]); ?>'
)" >