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:.

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

example: 

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

This can be used in CSS too.

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

Protocol-Relative URL Does Not Work 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