<uri>

  • Revision slug: CSS/uri
  • Revision title: uri
  • Revision id: 28395
  • Created:
  • Creator: teoli
  • Is current revision? No
  • Comment one or more formatting changes

Revision Content

Summary

Many CSS properties take a URI as value, such as {{ Cssxref("background-image") }}, {{ Cssxref("cursor") }}, {{ Cssxref("@font-face") }}, {{ cssxref("list-style") }} etc.  The format of a URI value is url( , followed by the URI itself, followed by ).  The URI may be quoted by simple quotes or double quotes.  Relative URIs are allowed and are relative to the URL of stylesheet (and not to the URL of the web page).

Syntax

 <a_css_property>:  url("http://mysite.example.com/mycursor.png")

 <a_css_property>:  url(http://mysite.example.com/mycursor.png)

Examples

.topbanner { background: url("topbanner.png") #00D no-repeat fixed; }
ul { list-style: square url(http://www.example.com/redball.png) }

Browser compatibility

Browser Lowest version
Internet Explorer 3.0
Firefox (Gecko) 1.0 (1.0)
Opera 3.5
Safari (WebKit) 1.0 (85)

Specifications

Specification Status Comment
CSS Values and Units Level 3 {{ Spec2('CSS3 Values') }} No significant change from CSS Level 2 (Revision 1)
CSS Level 2 (Revision 1) {{ Spec2('CSS2.1') }} No significant change fromm CSS Level 1
CSS Level 1 {{ Spec2('CSS1') }}  

See also

{{ languages( { "fr": "fr/CSS/uri" } ) }}

Revision Source

<h2>Summary</h2>
<p>Many <a href="/en/CSS_Reference" title="en/CSS_Reference">CSS properties</a> take a URI as value, such as {{ Cssxref("background-image") }}, {{ Cssxref("cursor") }}, {{ Cssxref("@font-face") }}, {{ cssxref("list-style") }} etc.  The format of a URI value is<code> url( </code>, followed by the URI itself, followed by<code> )</code>.  The URI may be quoted by simple quotes or double quotes.  Relative URIs are allowed and are relative to the URL of stylesheet (and not to the URL of the web page).</p>
<h2>Syntax</h2>
<pre> &lt;a_css_property&gt;:  url("http://mysite.example.com/mycursor.png")

 &lt;a_css_property&gt;:  url(http://mysite.example.com/mycursor.png)
</pre>
<h2>Examples</h2>
<pre>.topbanner { background: url("topbanner.png") #00D no-repeat fixed; }
</pre>
<pre>ul { list-style: square url(http://www.example.com/redball.png) }
</pre>
<h2>Browser compatibility</h2>
<table class="standard-table"> <tbody> <tr> <th>Browser</th> <th>Lowest version</th> </tr> <tr> <td>Internet Explorer</td> <td>3.0</td> </tr> <tr> <td>Firefox (Gecko)</td> <td>1.0 (1.0)</td> </tr> <tr> <td>Opera</td> <td>3.5</td> </tr> <tr> <td>Safari (WebKit)</td> <td>1.0 (85)</td> </tr> </tbody>
</table>
<h2 name="Specifications">Specifications</h2>
<table class="standard-table"> <thead> <tr style="background-color: rgb(255, 204, 255);"> <th scope="col">Specification</th> <th scope="col">Status</th> <th scope="col">Comment</th> </tr> </thead> <tbody> <tr> <td><a class="external" href="http://www.w3.org/TR/css3-values/#urls" title="http://www.w3.org/TR/css3-values/#urls">CSS Values and Units Level 3</a></td> <td>{{ Spec2('CSS3 Values') }}</td> <td>No significant change from CSS Level 2 (Revision 1)</td> </tr> <tr style="vertical-align: top;"> <td style="vertical-align: top;"><a class="external" href="http://www.w3.org/TR/CSS21/syndata.html#uri" title="http://www.w3.org/TR/CSS21/syndata.html#uri">CSS Level 2 (Revision 1)</a></td> <td style="vertical-align: top;">{{ Spec2('CSS2.1') }}</td> <td style="vertical-align: top;">No significant change fromm CSS Level 1</td> </tr> <tr> <td style="vertical-align: top;"><a class="external" href="http://www.w3.org/TR/CSS1/#url" title="http://www.w3.org/TR/CSS1/#url">CSS Level 1</a></td> <td style="vertical-align: top;">{{ Spec2('CSS1') }}</td> <td style="vertical-align: top;"> </td> </tr> </tbody>
</table>
<h2>See also</h2>
<ul> <li><a href="/en/CSS_Reference" title="CSS Reference">CSS Reference</a> index</li> <li>CSS Data Types : {{ CSSDataTypes() }}</li>
</ul>
<p>{{ languages( { "fr": "fr/CSS/uri" } ) }}</p>
Revert to this revision