A relative URL is resolved against a base URL. In HTML that is usually the current document’s URL, unless a base element changes it. “Relative” does not always mean “in the same folder.”

Resolve three paths

For a document at https://example.com/guides/start.html:

Reference Resolved URL
images/dog.jpg https://example.com/guides/images/dog.jpg
../images/dog.jpg https://example.com/images/dog.jpg
/images/dog.jpg https://example.com/images/dog.jpg

../ moves up one directory. A leading slash starts at the origin’s root.

Observe resolution without loading an image

Inspect relative URL resolutionLink

HTML and CSS

HTML

<p>Resolve ../images/dog.jpg against the example document URL:</p>
<output></output>
<script>
  document.querySelector("output").textContent = new URL("../images/dog.jpg", "https://example.com/guides/start.html").href;
</script>

CSS

output {
  display: block;
  padding: 1rem;
  background: #eff6ff;
  overflow-wrap: anywhere;
}

Edit HTML or CSS to update the preview as you type. Copy code snippet copies the selected tab. Preview spacing and font defaults are not included.

No network request is made. The URL API shows the resolved address. A base ending in /guides/ is a directory base; /guides without the slash has a different last path segment.

CSS has its own base

A relative url() in an external stylesheet normally resolves against the stylesheet’s URL, not the HTML file’s directory. Check that distinction when moving stylesheets. Compare absolute URLs, src, and base.

Sources

Reference 1 provide the technical details and current compatibility information.