Using relative URL in CSS file, what location is it relative to?

Question

When defining something like a background image URL in a CSS file, when using a relative URL, where is it relative to? For example:

Suppose the file /stylesheets/base-styles.css contains:

div#header { 
    background-image: url('images/header-background.jpg');
}

If I include this style-sheet into different documents via <link ... /> will the relative URL in the CSS file be relative to the stylesheet document in /stylesheets/ or relative to the current document it's included to? Possible paths like:

/item/details.html
/about/index.html
/about/extra/other.html
/index.html

score 592 · Accepted Answer · edited Feb 07 '16 at 04:00

592

According to W3:

Partial URLs are interpreted relative to the source of the style sheet, not relative to the document

Therefore, in answer to your question, it will be relative to /stylesheets/.

If you think about this, this makes sense, since the CSS file could be added to pages in different directories, so standardising it to the CSS file means that the URLs will work wherever the stylesheets are linked.

edited Feb 07 '16 at 04:00

Darryl Hein

142,451
95
218
261

answered Jun 02 '09 at 16:24

Alex Rozanski

37,815
10
68
69

looks like there is an exception to the rule: `-ms-behavior` in IE :( – Philipp Kyeck Sep 29 '14 at 11:32
2

there is another exception: when the url is the default value of a custom property. Say you define `.banner { background-image: var(--bgimg, url('images/default.jpg')); }`, but don’t define a value for `--bgimg` yet. Then on the page `/index.html`, a `.banner` will look for `/images/default.jpg`, but on another page `/about/index.html` a `.banner` will look `/about/images/default.jpg`. very broken IMO. – chharvey Aug 15 '17 at 23:47
correction: the default value bug above is fixed in Chrome v60. – chharvey Aug 16 '17 at 00:49
if your css is in a bundle the path really doesn't matter. It's not where you think it's going to be, nothing is relative anymore. – Tod Mar 15 '18 at 14:44
2

I had issues when using properties: `background: var(--primary-color-background) no-repeat center center url("maps.jpg");` This did not work in IOS and Safari. Only absolute path `/resources/maps.jpg` works in Safari in conjunction with a css property. – andy Nov 28 '18 at 22:46
@Tod: What in more detail do you mean by "nothing is relative any more"? (I still use relative URLs to switch back and forth between local files and remote website all the time - am I still doing something I shouldn't be doing any more?) – Chuck Kollars Dec 08 '20 at 18:35
@ChuckKollars So if I'm using C# bundles and .Net is bundling all my CSS into one minified file, where the file was no longer matters. The CSS isn't there anymore, it's in some file .Net has made up. Sure you can work out the relative path, but it's easier to debug if paths are always relative to the host. – Tod Dec 14 '20 at 15:10
CSS custom properties actually **copy "token streams"** meaning that if you set e.g. `background-image: url("path/to/somewhere")` and use it in another CSS file, the actual string `url("path/to/somewhere")` is copied instead of the correct URL reference! For details, see https://github.com/w3c/csswg-drafts/issues/757 – this is caused by simplistic original definition of CSS custom properties and cannot be fixed without breaking existing usage. Old MSIE and Safari implementations used to resolve relative URLs according to BASE URL of the HTML documents instead of BASE URL of the CSS file, too. – Mikko Rantalainen May 25 '21 at 09:10

score 79 · Answer 2 · answered Jun 02 '09 at 16:23

79

It's relative to the CSS file.

answered Jun 02 '09 at 16:23

M4N

94,805
45
217
260

score 57 · Answer 3 · edited Nov 04 '15 at 21:18

57

It's relative to the stylesheet, but I'd recommend making the URLs relative to your URL:

div#header { 
  background-image: url(/images/header-background.jpg);
}

That way, you can move your files around without needing to refactor them in the future.

edited Nov 04 '15 at 21:18

TylerH

20,799
66
75
101

answered Jun 02 '09 at 16:28

Codebeef

43,508
23
86
119

1

What difference does the extra "/" at the front make? – Casebash May 12 '11 at 06:36
19

Just like pathnames on the command line, the leading / at the front of the path means it points to an absolute resource on the current web server. – David W. Keith May 21 '11 at 16:09
6

There's actually a case where it's better to use URIs relative to the CSS file. In my case, I have a directory "/css/" where I put all the CSS data. Now, I want to test new features on the website in a separate folder. It gets hard to test, e.g., new background images in the test folder. It all depends on your needs... – Diego May 20 '14 at 16:45
14

Absolute paths makes it difficult to put solution in a subfolder of the domain. There are a number of reasons why you want to support subfolders. It makes it easier to do testing (as Diego mentioned) where you can have previous version/pre-releases located on the same domain as prod. Future changes where corporate proxy servers are set up to support SSO, moving all solutions to one domain, etc. Especially with SSL one might want to avoid the overhead of multiple domain names to maintain. For me these considerations are much more important than "easier to move my .css-file". – Tedd Hansen Sep 22 '14 at 11:20
images and stuff like that goes to cdn anyways so this is perfect – Muhammad Umer Apr 21 '17 at 16:52

score 33 · Answer 4 · edited Jun 20 '20 at 09:12

In order to create modular style sheets that are not dependent on the absolute location of a resource, authors may use relative URIs. Relative URIs (as defined in [RFC3986]) are resolved to full URIs using a base URI. RFC 3986, section 5, defines the normative algorithm for this process. For CSS style sheets, the base URI is that of the style sheet, not that of the source document.

For example, suppose the following rule:
body { background: url("yellow") }
is located in a style sheet designated by the URI:
http://www.example.org/style/basic.css
The background of the source document's BODY will be tiled with whatever image is described by the resource designated by the URI
http://www.example.org/style/yellow
User agents may vary in how they handle invalid URIs or URIs that designate unavailable or inapplicable resources.

Taken from the CSS 2.1 spec.

score 16 · Answer 5 · answered Jun 02 '09 at 16:24

16

For CSS style sheets, the base URI is that of the style sheet, not that of the source document.

(Anything else would be broken, IMNSHO)

answered Jun 02 '09 at 16:24

Quentin

914,110
126
1,211
1,335

score 6 · Answer 6 · answered Jan 27 '15 at 04:03

One issue that can occur, and seemingly break this is when using auto minimization of css. The request path for the minified bundle can have a different path than the original css. This may happen automatically so it can cause confusion.

The mapped request path for the minified bundle should be "/originalcssfolder/minifiedbundlename" not just "minifiedbundlename".

In other words, name your bundles to have same path (with the /) as the original folder structure, this way any external resources like fonts, images will map to correct URIs by the browser. The alternative is to use absolute url( refs in your css but that isn't usually desirable.

This saved me a load of time! Thanks. It should be documented more — mjbates7, Aug 07 '17 at 09:00

score -4 · Answer 7 · edited Aug 10 '15 at 17:58

-4

Try using:

body {
  background-attachment: fixed;
  background-image: url(./Images/bg4.jpg);
}

Images being folder holding the picture that you want to post.

edited Aug 10 '15 at 17:58

bardzusny

3,788
7
30
30

answered Aug 10 '15 at 17:18

Keshh Chiei

1
1

Using relative URL in CSS file, what location is it relative to?

7 Answers7

Linked

Related