0

A relative path in a CSS file is relative to that CSS file. Is there any way to change that default behavior though? My use case for this would be to give web pages individual backgrounds. It would be nice to have

body { background-image: url("banner.jpg"); }

once in the CSS file and just let the browser know to look for banner.jpg in the same directly as the HTML (first?), rather than have

<style> body { background-image: url("banner.jpg"); } </style>

in the head of every single HTML file. The ideal here would be to mimic the behavior of the PATH shell variable, specifying multiple paths in order of precedence, to tell the browser "look in the same directly as the HTML file first for a banner.jpg, but if it's not there go use the default one in the same directory as the CSS file."

Mike Pierce
  • 1,390
  • 1
  • 12
  • 35
  • 1
    a **file-relative-path** is always relative to the file it is used in. The only other type of a relative path would be a **root-relative-path** which would start from the root itself. Using the root as start point would always lead to the same files no matter which file is going that specified path – tacoshy Aug 24 '22 at 17:02

1 Answers1

1

Is there any way to change that default behavior though?

No.

Your options are:

  • The custom stylesheet on a per-page basis you have already mentioned
  • Writing unique selectors for the body elements on different pages (e.g. by adding class attributes).
  • Dynamically generating the rule at runtime using JavaScript, the location object, and a lookup table.
Quentin
  • 914,110
  • 126
  • 1,211
  • 1,335