WordPress and CSS

Use the WordPress post_thumbnail picture in background via CSS

June 6, 2023 · 3 minutes

You are working on a WordPress custom theme and you really want to use the post_thumbnail picture as a background via the CSS background-image property. You face a crisis because using the the_post_thumbnail(); or the get_the_post_thumbnail(); template tags you obtain an HTML <img> element. That is not what you want to obtain! You want to use this image in the CSS background-image property! There is a not so difficult solution to quickly obtain what you want: read the below article…

Summary

How to get the WordPress post_thumbnail URL?

If we think about the problem we are facing, we have to recognize that we are trying to put an image as a background-image — which is a CSS problem — while using template tags whose task is writing HTML! Obviously the solution is not there…

What we need is not to display the picture via the HTML but get the URL of this picture to use it as a value in a CSS background property.

As usual WordPress propose us a specific function: the get_the_post_thumbnail_url() function. You will find more information about this function in the WordPress Developer Resources.

Get the WordPress post_thumbnail URL

It is very easy:

  1. You must be working in a PHP file.
  2. You call the get_the_post_thumbnail_url() function inside a variable to keep the result and re-use it.
PHP
<?php $url =  get_the_post_thumbnail_url(); ?>

That’s all!

Get the specific size WordPress post_thumbnail URL

That is not more difficult:

  1. You must be working in a PHP file.
  2. You call the get_the_post_thumbnail_url() function inside a variable to keep the result and re-use it.
  3. When calling the get_the_post_thumbnail_url() function, pass it two arguments: null and the size name.
PHP
<?php $url =  get_the_post_thumbnail_url(null, ‘medium’); ?>

That’s all!

You are happy because of having got the URL you need. But… how to use it? The answer is just below.

How to use the WordPress post_thumbnail URL?

You have finally got the so expected URL of the WordPress post_thumbnail: That’s great! But you have to face another problem:

Is it possible to use a PHP variable in a CSS file?

Until now, I have never used a PHP variable in a CSS file! It must exist another solution to circumvent this problem. A CSS file is not the only way to use CSS rules; even if it is better to avoid using inline CSS I think it could be the solution here.

Use the get_the_post_thumbnail_url() function directly in the WordPress template file

The steps to use a Word Press post_thumbnail picture via the CSS background-image property

In the WordPress custom template PHP template-file:

  1. Get the post_thumbnail URL at the top of the file.
  2. In the WordPress Loop, in a HTML block element like a <div> (or an inline element transformed in a block via the CSS display: block; property), insert the style attribute via PHP.
  3. Assign the CSS background-image property to the style attribute; call the $url variable as the url value.
  4. As you would have done in the CSS file, you can add the background-repeat, background position, background-size… properties to obtain the expected display. I will not give more information on the CSS background property because that is not the subject of this article.
  5. You can add a gradient on top of the picture too…

After having saved your file, go to the website and control the render.

An example of code using a Word Press post_thumbnail picture via the CSS background-image property

PHP
<?php  $url = get_the_post_thumbnail_url(null, ‘medium’); ?>
// code
    <?php if( have_posts() ) : while( have_posts() ) : the_post(); ?>
    // code
        <div class=”//…”
            <?= ‘style=”
                    background-image:
                    linear-gradient(274.21deg, rgba(16, 101, 149, 0.12) 16.21%, #093954 30.41%),
                    url(‘. $url .’);
                    background-repeat: no-repeat;
                    background-position: bottom 0px right 0px;
                    background-size: contain;“‘; ?>>
            // code
        </div>
    <?php endwhile; endif; ?>

In conclusion

To use a WordPress post_thumbnail  picture in the CSS background-image property:

  • Get the URL of the picture via the get_the_post_thumbnail_url() function.
  • Insert it the CSS background-image url value in a style attribute.

I have used this solution on this blog: open any article and look at the top of it in the header…

In a next article of this series named “WordPress and CSS”, we will apply a gradient on a WordPress post_thumbnail picture…

< Previous Post
Next Post >
Haut de page