Using a featured image as a background image in WordPress

When building custom WordPress themes for clients I like to give them as much control over their content as possible. However, when you take into account that clients may not be aware enough when inputting images and content their site may end up looking pretty rough if they uploaded a huge image or short piece of content.

Specifically when it comes to images I like to take all the guess work out of what size an image should be for the client.

With WordPress you can use the handy add_image_size  (WordPress codex) function in your functions.php  file in order to set specific image sizes, but even that is still not always a full proof solution to ensure that an image will look good on every screen size.

An example scenario

A fairly frequent trend in modern websites is to have a large hero image towards the top of a websites page. From a control standpoint it is great to give the client control over this via the featured image functionality on pages and posts. The challenge is how to handle this on the front end. If you plan on using the function the_post_thumbnail  it will output the image already wrapped in an img  tag, but really what we want is for it to be a background image so that we can use nifty CSS properties like background-size: cover; .

The goal

In that scenario our goal is simple. We want to grab the featured image from a page or post and we want to use it as the background image for a given element. We are also going to take it a step farther by allowing the client to set a default featured image so that if a page or post does not have a featured image set it will have a fallback. The default featured image will also be used on pages that do not have the ability to have featured images set such as archive and 404 pages.

How to implement

Great, so we have our example scenario of a hero image and we have the goal of getting the featured image URL and applying it as the background image of an element on the page. This is the code we are going to use to accomplish that.

We are going to use the little code snippet above in order to set a variable that will store the URL of the featured image, or fallback, that we can apply as the background image of the element we need it on.

Let me walk  you through what this code is doing. First, it checks to see if there is a featured image set for the page or post you are on. If there is a featured image set it is going to set the variable to be the URL of the featured image for the page/post. It does this using the functions wp_get_attachment_url  (WordPress codex) and get_post_thumbnail_id  (WordPress Codex) which we pass the post ID into.

If there is no featured image set it then sets the variable to pull the URL of the default featured image.

Here is how it might look applied to an element on your site:

<section class="hero" style="background-image: url(<?php echo $feat_image; ?>);">

  content goes here

</section>

There you have it. A very easy way to get the URL of a page/post featured image and use it as a background image of an element on that page/post as well as providing a fallback image in case the featured image is not set.

A couple notes

In this example I am using Advanced Custom Fields to create an input in the theme options page in order for the user to easily be able to upload and control the default featured image. You can replace this with whatever you prefer to work with, or at the very least you could hardcode a URL to the image. I love working with ACF because it is super easy to implement and allows me to make things super easy for my clients to manage custom content areas outside of the normal editor.

This is also one of the only times that I would recommend using inline styling. There is really no way to get around it. I know you want to avoid it as much as possible, but I feel this is an acceptable situation to use it.

You will want to include this snippet of code inside the loop. You can get away with it not being in the loop for pages, but on posts it will not work if it is not within the loop.

Lastly, you can absolutely use this on custom post types as well that support featured images.