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.

backgr         


        

Answer 1

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 2

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 3

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 4

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

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")
}