Revision 995109 of <url>

<p>{{ CssRef() }}</p>

<h2 id="Summary">Summary</h2>

<p>The <code>&lt;url&gt;</code> <a href="/en/CSS" title="CSS">CSS</a> data type denotes a pointer to a resource. It has no proper syntax and can only be expressed through the <code>url()</code> functional notation.</p>

<div class="note"><strong>URI or URL?</strong><br />
<br />
There is a difference between a <a class="external" href="https://en.wikipedia.org/wiki/Uniform_Resource_Identifier" title="https://en.wikipedia.org/wiki/Uniform_Resource_Identifier">URI</a> and a <a class="external" href="https://en.wikipedia.org/wiki/Uniform_Resource_Locator" title="https://en.wikipedia.org/wiki/Uniform_Resource_Locator">URL</a>. A URL describes the location of the resource, the URI describes an id of the resource . A URI may be a location, a URL, or a name, a <a class="external" href="https://en.wikipedia.org/wiki/Uniform_Resource_Name" title="https://en.wikipedia.org/wiki/Uniform_Resource_Name">URN</a>, of a resource.<br />
<br />
In CSS Level 1, the <code>url()</code> functional notation was introduced to describe... URL, i.e. locations (a <code>&lt;url&gt;</code> CSS data type, though it wasn't explicitly defined that way).<br />
<br />
In CSS Level 2, the same functional notation was extended to describe any URI, being a URL or URN. This led to the confusing fact that <code>url()</code> was used to create a <code>&lt;uri&gt;</code> CSS data type. Not only was this confusing, but URN are almost never used in the CSS usual case.<br />
<br />
To fix this, CSS Level 3 came back to the initial definition, this time explicitly defined. The functional notation <code>url() </code>denotes a <code>&lt;url&gt;</code> CSS data type and no more the more generic <code>&lt;uri&gt;</code> CSS data type.<br />
<br />
Remark that these semantic details doesn't change much for a web author, or the implementation details of the data type.</div>

<p>Many <a href="/en/CSS_Reference" title="en/CSS_Reference">CSS properties</a> take a URL as value, such as {{ Cssxref("background-image") }}, {{ Cssxref("cursor") }}, {{ Cssxref("@font-face") }}, {{ cssxref("list-style") }} etc.&nbsp;&nbsp;</p>

<h2 id="The_url()_functional_notation">The url() functional notation</h2>

<p>The URL&nbsp;may be unquoted, quoted by single or double quotes. Relative URLs are allowed and are relative to the URL of stylesheet (and not to the URL of the web page).</p>

<h2 id="Syntax">Syntax</h2>

<pre>
 &lt;a_css_property&gt;:  url("https://mysite.example.com/mycursor.png")

 &lt;a_css_property&gt;:  url(https://mysite.example.com/mycursor.png)
</pre>

<div class="note">
<p><strong>Note:</strong> Control characters above <span id="summary_alias_container"><span id="short_desc_nonedit_display">0x7e are no longer allowed in unquoted url() notation starting in Firefox 15. See</span></span> {{Bug(752230)}} for more details.</p>
</div>

<h2 id="Examples">Examples</h2>

<pre>
.topbanner { background: url("topbanner.png") #00D no-repeat fixed; }
</pre>

<pre>
ul { list-style: square url(https://www.example.com/redball.png) }
</pre>

<h2 id="Specifications" name="Specifications">Specifications</h2>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">Specification</th>
   <th scope="col">Status</th>
   <th scope="col">Comment</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>{{ SpecName('CSS3 Values', '#urls', '&lt;url&gt;') }}</td>
   <td>{{ Spec2('CSS3 Values') }}</td>
   <td>No significant change from CSS Level 2 (Revision 1)</td>
  </tr>
  <tr>
   <td>{{ Specname('CSS2.1', 'syndata.html#uri', '&lt;uri&gt;') }}</td>
   <td>{{ Spec2('CSS2.1') }}</td>
   <td>No significant change from CSS Level 1</td>
  </tr>
  <tr>
   <td>{{ SpecName('CSS1', '#url', '&lt;url&gt;') }}</td>
   <td>{{ Spec2('CSS1') }}</td>
   <td>&nbsp;</td>
  </tr>
 </tbody>
</table>

<h2 id="Browser_Compatibility" name="Browser_Compatibility">Browser compatibility</h2>

<p>{{CompatibilityTable}}</p>

<div id="compat-desktop">
<table class="compat-table">
 <tbody>
  <tr>
   <th>Feature</th>
   <th>Chrome</th>
   <th>Firefox (Gecko)</th>
   <th>Internet Explorer</th>
   <th>Opera</th>
   <th>Safari (WebKit)</th>
  </tr>
  <tr>
   <td>Basic support</td>
   <td>1.0</td>
   <td>1.0 (1.0)</td>
   <td>3.0</td>
   <td>3.5</td>
   <td>1.0 (85)</td>
  </tr>
 </tbody>
</table>
</div>

<div id="compat-mobile">
<table class="compat-table">
 <tbody>
  <tr>
   <th>Feature</th>
   <th>Android</th>
   <th>Firefox Mobile (Gecko)</th>
   <th>IE&nbsp;Phone</th>
   <th>Opera Mobile</th>
   <th>Safari Mobile</th>
  </tr>
  <tr>
   <td>Basic support</td>
   <td>1.0</td>
   <td>1.0 (3.5)</td>
   <td>yes</td>
   <td>yes</td>
   <td>1.0</td>
  </tr>
 </tbody>
</table>
</div>