How to reference a theme image in a stylesheet?

by

I have a global element as part of my theme and I need to reference and image as a background image. I need the URL to the image. I assume that it’s bad practice to hard-code the URL and that the URL needs to be relative to the theme location. What is the recommended way of referencing an image within a stylesheet?

3 s
3

It depends on your image and stylesheet location.

But this is the syntax:

.theme-image {
  background-image: url('../images/header-img.jpg');
}

The above code is for the structure

wp-content
 - themes
  - your-theme 
    - images
     - header-img.jpg
    - css
     - style.css

You are making the browser come one directory before and search for images directory.

Leave a Comment