CSS: protocol-relative URL

By Xah Lee. Date: . Last updated: .

What is Protocol-Relative URL

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.

CSS, Advanced