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

Concoff

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

Pennsylvanian

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.

Olag

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

Holliholliday

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

Urtication

Answer 5

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>

Lecia

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 }

Measureless

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.

Seriatim

Answer 8

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>

Comely

Style attributes are not standard conform anymore and considered harmful. See #2612983 – Efren

Answer 9

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>

Essam

Answer 10

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

Hampshire

Answer 11

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.

Necessitarianism

Answer 12

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.

Escribe

Answer 13

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

Mucosa

Answer 14

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

Deputation

Answer 15

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.

Dudgeon

Answer 16

You need to echo the get_the_post_thumbnail_url() function

For example

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

Pash

Answer 17

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

.title{backgroound:url(' /assets/images/title.png'); }

OR in theme CSS you can use

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

Worked for me.

Gamez