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

Question

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  lt link       gt  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

User · Answer

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

User · Answer

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

User · Answer

It s relative to the CSS file

User · Answer

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

User · Answer

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

User · Answer

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  quot yellow quot      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

User · Answer

Try using   body     background-attachment  fixed    background-image  url   Images bg4 jpg       Images being folder holding the picture that you want to post

User · Answer

This worked for me  adding two dots and slash   body      background  url    images yourimage png

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

Examples related to html

Examples related to css