1

I am getting an issue with loading relevant images within CSS file from a child theme directory. I placed -

Sites: example.com OR sub-domain.example.com

body{
background-image: url(/wp-content/themes/child-theme-name/images/some-image.png);
}

Now the above works fine when the site is in the root folder (or sub-domains) but the path breaks when the site is from a sub-directory installation.

Site: example.com/sub-folder

I tried with

body{
    background-image: url(../wp-content/themes/child-theme-name/images/some-image.png);
    }

Now it works in sub-folders but again breaks in the root or sub-domain.

How to write the correct file path which will work in both root or sub-directory site where the images will be loaded from a child theme folder (say images folder)

  • Where is the CSS file stored in your child theme? – MinhTri May 6 '16 at 6:51
  • 1
    Simply try background:url(images/some-image.png) if css file and image folder in same folder. Else use ../ to specify location. No need to start url with wp-content. – Rishabh May 6 '16 at 6:59
  • in the root of the theme directory. themes/child-theme-name/style.css – Ayanize May 6 '16 at 7:00
  • 2
    To be clear, it would be great if you can update your question with URLs to both main site and sub folder site pages where images look broken. – Prasad Nevase May 6 '16 at 7:45
4

There's no need for the wp-content/themes path - both themes sit in the same directory, so you can just traverse up one and then back down to child theme:

background-image: url(../child-theme-name/images/some-image.png);

Update: Regarding your answer to "where is the CSS file stored", you inferred that the stylesheet resides in the child theme folder - in which case you are massively overcomplicating things and can just use (as @Rishabh suggested):

background-image: url(images/some-image.png);

Relative paths in a stylesheet are relative to the stylesheet itself - not the document, the parent theme, or anything else for that matter.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.