CODEWITHSUNDEEP
htmlcssimagerelative-path
itschuck
itschuck

Reputation: 21

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

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?

Upvotes: 1

Views: 2250

Answers (2)

Andrew Moore
Andrew Moore

Reputation: 95364

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.

Upvotes: 2

ComFreek
ComFreek

Reputation: 29434

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.

Upvotes: 0

Related Questions