How to Use Featured Image as Background Image In WordPress

Do you want to use the featured image as background image in WordPress? In this brief tutorial, we will illustrate how you can set the featured image as a background image.

Table of Contents

Before you proceed to the solution, it is important to note that you need some coding skills to implement the solution. Therefore, if you are not familiar with coding, we recommend contacting a qualified WordPress developer. This will ensure that you do not break your site.

Remember to follow all the steps correctly to get the same results. It

Let us get right into it.

Summary

Edit Template Files Used to Display Individual Blog Posts
Retrieve the Featured Image
Add the Background Image
Use CSS to Adjust the Display

For illustration purposes, we will have a background image behind the title of their blog posts. We will set a background image using CSS.

[css] .header-wrap {

text-align: center;

background:url(‘../img/image21.jpg’);

padding: 40px 50px;

}
[/css]

If you want to select a custom background image behind the title of the blog post stick to the end. This post assumes that featured images are enabled in the theme. This is a standard functionality for WordPress themes.

Edit Template Files Used to Display Individual Blog Posts

The first step is to edit the template files to ensure the featured image is displayed as the background image with inline styling.

This means that we need to edit the single.php file because it is used to display individual blog posts.

[html] <div class="header-wrap">

</header>

</div>
[/html]

Retrieve the Featured Image

To retrieve the image, we will use the wp_get_attachment_image_src function. To use this function, you need to pass in the id of the image as a parameter. We will be using the get_post_thumbnail_id function.

This means that we will include the id of the post as a parameter for get_post_thumbnail_id.

The next parameter is the size of the image. It is worth mentioning that the default is ‘thumbnail,’ but we will change that to the full size of the original image.

[php] <?php $backgroundImg = wp_get_attachment_image_src( get_post_thumbnail_id($post->ID), ‘full’ ); ?>
[/php]

It is important to note that the wp_get_attachment_image_src function returns an array. This array 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 will reference the background image URL as shown below:

$backgroundImg[0]

Add the Background Image

We will be adding the background image using inline CSS styling. We will also use PHP to echo out the background URL.

[html] <div class="header-wrap" style="background: url(‘<?php echo $backgroundImg[0]; ?>’) no-repeat; ">

</header>

</div>
[/html]

Use CSS to Adjust the Display

Here is a bit of CSS to style the display over the background image:

[css] .header-wrap h1.entry-title {

font-weight: 400;

color: #FFF;

font-size:3em;

line-height: 1.2em;

text-shadow: 1px 1px 2px black;

}
[/css]

You can add your own CSS styling to ensure the text matches the branding of your site.

Conclusion

In summary, we have shared how you can use a featured image as the background image. It is not a complicated process, but you need some coding skills to implement the solution. You can go a step ahead and integrate them into other areas of your website.

We hope that this post helped you to achieve the result you were looking for. If you need further customization, feel free to contact us.

Editorial Staff

How to use Featured Image as Background Image in WordPress