CSS background images in WordPress

Question

Is it possible to get a background image in CSS like you normally do in HTML when working with WordPress. I've tried doing this but it doesn't work.

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

Answer 1

PHP code cannot run in .css file, however you can use inline style, such as:

<div style="background-image: url("<?php //url ?>");">

or

<style>
  .class-name {
    background-image: url("<?php //url ?>");
  }
</style>

The above would be useful when working with custom fields for dynamic image paths.

If the image is located in the theme directory, PHP won't be needed, let's say the image folder is directly under the theme folder /theme-name/images, and the stylesheet is /theme-name/style.css, then you can just add the background image to the css file as follows:

.class-name {
  background-image: url("images/file.jpg")
}

Answer 2

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.

Answer 3

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

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

Answer 4

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>

Answer 5

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>

Answer 6

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 }

Answer 7

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.

Answer 8

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

Answer 9

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.

Answer 10

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.

Answer 11

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

Answer 12

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>

Answer 13

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/....

Answer 14

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.

Answer 15

You need to echo the get_the_post_thumbnail_url() function

For example

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