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.

CSS Misc

  1. Computed Style
  2. Pseudo Class vs Pseudo Element
  3. Media Query
  4. Variable
  5. calc
  6. Reset
  7. user-select
  8. Data URI Scheme
  9. protocol-relative URL
  10. Default Unit
  11. Declaring Character Set in CSS File
  12. Jargons Explained: Tag, Element, Node, Object, Attribute, Property, Method
Liket it? I spend 2 years writing this tutorial. Help me spread it. Tell your friends. Or, 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 Object Ref
  5. DOM Scripting
  6. SVG
  7. Blog