Problem with loading images from child theme CSS file with relevant path

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

Sites: OR

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.


I tried with

    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)

Solutions Collecting From Web of "Problem with loading images from child theme CSS file with relevant path"

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.