mozilla

Revision 28393 of <uri>

  • Revision slug: CSS/uri
  • Revision title: uri
  • Revision id: 28393
  • Created:
  • Creator: teoli
  • Is current revision? No
  • Comment 54 words added, 12 words removed

Revision Content

{{ CSSRef() }}

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') }}  

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

Revision Source

<p>{{ CSSRef() }}</p>
<h3>Summary</h3>
<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><h3>Syntax</h3>
<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>
<h3>Examples</h3>
<pre>.topbanner { background: url("topbanner.png") #00D no-repeat fixed; }
</pre>
<pre>ul { list-style: square url(http://www.example.com/redball.png) }
</pre>
<h3>Browser compatibility</h3>
<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>
<h3 name="Specifications">Specifications</h3>
<table border="1" cellpadding="1" cellspacing="1" style="width: 1053px; border-style: solid; border-width: 1px; height: 75px; border-color: rgb(0,0,0);"> <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>
<p>{{ languages( { "fr": "fr/CSS/uri" } ) }}</p>
Revert to this revision