I see from the W3 docs that:
Partial URLs are interpreted relative to the source of the style sheet, not relative to the document
where the "document" refers to the HTML document.
However, I'm seeing some strange behavior with respect to relative paths. I have a Django project where my static files are in this directory structure:
static/
css/
stylesheet.css
img/
image.png
stylesheet.css contains
.someclass {
background: url('<path/to/image.png>')
}
What's strange to me is that this works if the URL is url('../../img/image.png')
, but does not work with url('../img/image.png')
. The latter is what I'd expect the correct path to be, based on all the answers to similar questions I see on Stack Overflow (example, another example) -- and really, based on how relative paths work generally.
To test this, I changed the URL to url('img/image.png')
and that causes the browser to look for /static/css/stylesheet.css/img/image.png
.
That seems bizarre to me. Is that really what is meant by partial URLs that are "relative to the source of the style sheet"? Is the URL relative to the CSS file itself, and not to its enclosing directory?