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?

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?

• images
• css
• urls

• 1 Where is the image location or it is to be uploaded? – m4n0 Commented May 19, 2015 at 5:28

3 Answers 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.

I had a problem with the relativity of the URL. I mean, when openening a categoryoverview from third or deeper child-categories like this:

-nature
--animals
---wolves >>>3rd level
--birds

The URL for wolves would become like: /category/nature/animals/wolves/ Therefore the imagelocation is one directory-level before and doesn't show up.

So I tried this and it worked:

.sidebar-row .widget {
  background-image: url("../../../../wp-content/uploads/.../image.webp");
  background-image: url("../../../../../wp-content/uploads/.../image.webp");
  background-image: url("../../../../../../wp-content/uploads/.../image.webp");
}

Images on incorrect locations will be ignored, the one on the correct location will show up.

BTW: I'm using the "Simple CSS"-plugin to change the layout for my site.

For WordPress, it should be something like this:

   background:url('../wp-content/themes/yourtheme/images/social-icons-v2-opt.png');

For Child Theme

   background:url('../wp-content/themes/yourtheme-child/images/social-icons-v2-opt.png');