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, drop the http: */
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 format 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.

Like what you read? Buy JavaScript in Depth