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)

4
  • Where is the CSS file stored in your child theme?
    – Minh Tri
    Commented May 6, 2016 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
    Commented May 6, 2016 at 6:59
  • in the root of the theme directory. themes/child-theme-name/style.css
    – Ayanize
    Commented May 6, 2016 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. Commented May 6, 2016 at 7:45

1 Answer 1

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.

0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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