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

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

css url relative path
css file path
css url absolute path
html img src local file path
css url image
css url() function
css url w3schools
javascript relative path

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

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.

Using relative URL in CSS file, what location is it relative to?, If that file path is relative (meaning that it doesn't start with http://), I pay extra close attention to the relationship of where the file is that is referencing the image,  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.


It's relative to the CSS file.

Quick Reminder About File Paths, A relative file path points to a file relative to the current page. In this When using relative file paths, your web pages will not be bound to your current base URL. Background URL CSS - For image relative, absolute path Background URL CSS - For image relative, absolute path A style sheet can reference URLs or links to other files, almost always it is images that are linked as background or fonts.


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.

HTML File Paths, This is called a relative URL, and the file path is in relation to the location of Go into the "css" folder (the "css/" part of the path) that is at the same level (in this We don't want to use absolute URLs to point to directory files  say I have a css folder and a pictures folder, all contained within the parent directory. In the css folder I have a css file in which I want to use background-image:url() What would I put as the file location if I'm attempting to access a picture inside the pictures folder?


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.

What are relative URLs vs absolute URLs?, In CSS, URLs are always defined with reference to the style sheet, not the document linked to it. The proper directory structure could be, for  This is indeed reasonable, because it allows referencing the same .css file from different .html files (which may be located in different places) without braking paths to external objects. Yes. It is relative to the CSS file. I'll add that this also includes relative to the domain the CSS file is on.


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)

Background URL CSS, E.g. background-image:url(/images/pic.jpg); does not work. If the css is in an external stylesheet remember that path is relative to the css document. never starts with a slash) which is relative to whichever document, then  None of this is affected by how you choose to enqueue the file. Where you might be going wrong is that you mentioned a parent theme. If you're trying to load an image from the parent theme, a relative path like the above example isn't going to work. CSS has no knowledge or concept of a parent/child theme relationship.


Url() - relative paths not working - HTML & CSS, I used to use relative links and created problems when trying to use a common <​header> </header> or moving files to a different path. Unfortunately Firefox has a stupid bug here the paths are relative to the path of the page, instead of being relative to the position of the CSS file. Which means if you have pages in different positions in the tree (like having Default.aspx in the root and Information.aspx in the View folder) there's no way to have working relative paths.


Html5 relative path for anchor and stylesheets - HTML & CSS, Relative paths in CSS are relative to the stylesheet file. domain (if you want that​, start with a slash: url(/images/logo.png) ). If you're trying to load an image from the parent theme, a relative path like the above example isn't  If your project root was actually at /myproject/ it would not find the css file. Therefore, you need to determine where your project folder root is relative to the hostname, and specify that in your href notation.


Relative file paths in CSS when linking directly (not enqueuing , You can tell if a link is relative if the path isn't a full website address. you can only use relative links when linking to pages or files within your  It is best practice to use relative file paths (if possible). When using relative file paths, your web pages will not be bound to your current base URL. All links will work on your own computer (localhost) as well as on your current public domain and your future public domains.