CSS background images in WordPress

You don't need to use PHP in this question, your CSS file is already in template folder, so you can call image just like this:

background-image: url("images/parallax_image.jpg");

So you don't need to know template path to call images from your theme.

If the image folder is in the theme folder you can use:

background-image: url("/wp-content/themes/themeNameHere/images/parallax_image.jpg ");

Just upload your image to the WordPress Media Library

After that, you can give the path of the uploaded file in your CSS like this:

background-image:url('/wp-content/uploads/2019/12/filename.png');

Note: Open the uploaded image, there will be a path

I was having this issue with adding a background image to my Underscores based theme and I found this works:

background: url('assets/img/tile.jpg') top left repeat;

I first tried:

background: url('/wp-content/themes/underscores/assets/img/tile.jpg');

but that didn't work for me.

One way would be to add this CSS to a PHP page that has access to the bloginfo() function. Say in index.php, you would add...

<style>
  .some-element { 
    background-image: url("<?php bloginfo('template_directory'); ?>/images/parallax_image.jpg ");
  }
</style>

Another way is accessing image using css file location as the reference point, e.g. .class-name{ background-image:url("../images/file-name"); //one level up, then images folder background-image:url("../../images-directory-02/images/file-name"); //two levels up, then two folders in }

Use a style attribute in the tag and use the css.

<div style="background-image: url("<?php bloginfo('template_directory'); ?>/images/parallax_image.jpg ");">
Your other html here
</div>

As many people have suggested already do not use php in .css ext as it won't get interpreted.

But if you really need to use php because of some reasons you only know as you not responding, you can change the extension of your stylesheet to .php

then you can have

customestyles.php

<?php
    header("Content-type: text/css; charset: UTF-8");
   $sectionImage = bloginfo('template_directory')."/images/parallax_image.jpg";

?>
<style type="text/css">

    .selector{

        background-image: url(<?php echo "$sectionImage";?>);
    }
</style>

If your images folder is relative to your theme folder that is theme-folder/images and that of your css is in this structure theme-folder/css/your-css-file.css you can easily just traverse the folder path in your css e.g .custom-element{ background-image: url(../images/name-of-image.png) }

Short answer is you can not render PHP in a CSS file. I would suggest making sure your <rel> tag is setup correctly and just using the /images/parralax_iamge.jpg part.

Just find the corresponding element (tag, class or ID) with the browser tools/inspector in your page and add a CSS rule for that element, either in the stylesheet of the child theme or in the "customCSS" field of the theme options.

you can't add php code into .css files. but if you wanna do this using php see this.

As the others have suggested, you can simply set the background-image CSS property to do this.

However, none of the URLs that the other answers suggest worked for me.

I think the reason is because all of my images were stored in the "Media" area.

For all those who are storing your images in the "Media" area:

In order to find the URL to the image, you can:

1. Open the Admin dashboard of your site
2. Open the "Media" area
3. Click on the image you want to use
4. Copy the URL from the URL field, but only the portion after the domain name (e.g. domain-name.com)
5. Use this as your URL for the background-image property

I wouldn't recommend using the whole URL (using it without removing the domain name) because if your domain name ever changes, the URL will break.

Here's an example of what my full URL looked like: https://example.com/wp-content/uploads/2018/06/<Name of the Image>.jpeg, but I only used the /wp-content/uploads/2018/06/<Name of the Image>.jpeg portion.

In the end, my CSS property looked like this:

background-image: url("/wp-content/uploads/2018/06/<Name of the Image>.jpeg");

As a side note, the URL worked with both a beginning forward slash /wp-content/... and without one wp-content/....

In the first div you can see the result from the approved response, in the second div you can see the result from

<div style="background-image: url('<?= get_the_post_thumbnail_url(); ?>');">

The reason it does not work in the first div is because the parser thinks that the first block of text ends where the second " occurs.

FOLDER STRUCTURE: THEME_FOLDER --> ASSETS --> IMAGES

For using inline CSS which i will not recomment as it create issues when doing optimization test using lighthouse however you can use

OR in theme CSS you can use

background: url('../images/tile.jpg');

Worked for me.

You need to echo the get_the_post_thumbnail_url() function

For example

style="background-image: url('<?php echo get_the_post_thumbnail_url();?>