Do external CSS files with relative image paths reference external images?

Question

On domain1.com I have a simple html page:

<h1 class="hello-world">Hello World!</h1>

This page references an external CSS file which is hosted over on domain2.com. All of the images within that CSS file are referenced using relative paths. E.g:

h1.hello-world {
background-image:url(/images/cute-kitten.gif);
}

When I load the page on domain1 does the browser try to reference the image 'domain1.com/images/cute-kitten.gif' or 'domain2.com/images/cute-kitten.gif'?

And will the result be the same in all (current) browsers?

Surely you could just check this yourself, as I assume it would be a lot quicker than asking on SO....? — Nick R
– Nick R, Commented Jun 26, 2013 at 16:24
Hey guys, yup I did do some initial testing locally and it seemed to agree with the answers people have given here, however having looked on SO for similar questions a few people had reported that IE (which I can't get access to just at the moment) handled relative URLS in external CSS differently, so it would try to reference them on the domain requesting the CSS file rather than the domain the CSS file was hosted on. Having seen the answers here i'm confident that this is not the case and that it will behave as expected on all browsers, so it has been a great help. Thanks all! — itschuck
– itschuck, Commented Jun 26, 2013 at 16:35

Andrew Moore · Accepted Answer · 2013-06-26 16:21:03Z

2

According to the CSS Level 2 specification document, relative URIs are always resolved using the URI of the stylesheet which includes the path.

In order to create modular style sheets that are not dependent on the absolute location of a resource, authors may use relative URIs. [...] For CSS style sheets, the base URI is that of the style sheet, not that of the source document.

Therefore, it will always be resolved to http://domain2.com/images/cute-kitten.gif on all browsers.

answered Jun 26, 2013 at 16:21

Andrew Moore

95.8k30 gold badges167 silver badges175 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

ComFreek · Accepted Answer · 2013-06-26 16:18:31Z

0

As per CSS spec:

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

In your example, the URI would result in domain2.com/images/cute-kitten.gif.

answered Jun 26, 2013 at 16:18

ComFreek

29.5k18 gold badges107 silver badges157 bronze badges

Collectives™ on Stack Overflow

Do external CSS files with relative image paths reference external images?

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related