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

500
votes

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
8
htmlcss

8 Answers

568
votes

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.

72
votes

It's relative to the CSS file.

53
votes

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.

31
votes

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.

5
votes

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.

0
votes

This worked for me. adding two dots and slash.

body{
    background: url(../images/yourimage.png);
}
-4
votes

Try using:

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

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