CSS: protocol-relative URL

By Xah Lee. Date: . Last updated: .

Protocol relative URL is a URL without the http: or https:. For example, you write

<a href="//google.com/">google</a>

This can be used in CSS too.

/* use protocol-relative url starts with 2 slashes*/
div.xyz {background:url(//example.org/logo.png)}

Browser will use http: or https: automatically, depending which is used in current page.

protocol-relative URL for Local File

One problem with protocol relative url is that links to external sites will no longer work for local HTML files. For example, if you sell a book in HTML format. links like //example.org/ will not work.

Liket it? Put $5 at patreon.

Or, Buy JavaScript in Depth

If you have a question, put $5 at patreon and message me.

Web Dev Tutorials

  1. HTML
  2. Visual CSS
  3. JS in Depth
  4. JS Reference
  5. DOM
  6. SVG
  7. Web Dev Blog