Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

Tags:

html

css

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 
like image 402
anonymous coward Avatar asked Jun 02 '09 16:06

anonymous coward


People also ask

What is the relative path of file style CSS?

Answer. A relative path is an address that points to the current directory or project folder. In the example illustrated in this lesson, the relative path is images/mountains. jpg and it assumes we have an images subfolder nested within a project folder.

What does URL do in CSS?

The CSS url() function allows you to link to a resource, such as an image, web font, a filter, etc. The url() function accepts a url value as its parameter. This specifies the location of the file.

What is absolute path in CSS?

A style sheet can reference URLs or links to other files, almost always it is images that are linked as background or fonts.


2 Answers

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.

like image 132
Alex Rozanski Avatar answered Oct 12 '22 12:10

Alex Rozanski


It's relative to the CSS file.

like image 20
M4N Avatar answered Oct 12 '22 10:10

M4N