title: What is an example usage of <url-modifier> at CSS url() function?
body: <p><a href="https://www.w3.org/TR/css-values/#url-value">3.4. Resource Locators: the <code>&lt;url&gt;</code> type</a> describes a <code>&lt;url-modifier&gt;</code> at</p>
  
  <blockquote>
    <p>A <em><strong>URL</strong></em> is a pointer to a resource and is a functional notation
    denoted by <code>&lt;url&gt;</code>. The syntax of a <code>&lt;url&gt;</code> is:</p>
    
    <p><code>&lt;url&gt; = url( &lt;string&gt; &lt;url-modifier&gt;* )</code></p>
    
    <p>In addition to the syntax defined above, a  can sometimes be
    written in other ways:</p>
    
    <ul>
    <li><p>For legacy reasons, a <code>&lt;url&gt;</code> can be written without quotation marks around the URL itself. This syntax is specially-parsed, and
    produces a <code>&lt;url-token&gt;</code> rather than a function syntactically.
    [<a href="https://www.w3.org/TR/css-values/#biblio-css3syn">CSS3SYN</a>]</p></li>
    <li><p>Some CSS contexts, such as <a href="http://dev.w3.org/csswg/css-cascade-4/#at-ruledef-import"><code>@import</code></a>, allow a <code>&lt;url&gt;</code> to be represented by a <a href="https://www.w3.org/TR/css-values/#string-value"><code>&lt;string&gt;</code></a> instead. This behaves identically to
    writing a <code>url()</code> function containing that string. Because these
    alternate ways of writing a <code>&lt;url&gt;</code> are not functional notations, they
    cannot accept any <code>&lt;url-modifier&gt;</code>s.</p></li>
    </ul>
    
    <p>Note: The special parsing rules for the legacy quotation mark-less
    <code>&lt;url&gt;</code> syntax means that parentheses, whitespace characters, single
    quotes (') and double quotes (") appearing in a URL must be escaped
    with a backslash, e.g. <code>url(open\(parens)</code>, <code>url(close\)parens)</code>.
    Depending on the type of URL, it might also be possible to write these
    characters as URL-escapes (e.g. <code>url(open%28parens)</code> or
    <code>url(close%29parens)</code>) as described in[<a href="https://www.w3.org/TR/css-values/#biblio-url">URL</a>]. (If written as a
    normal function containing a string, ordinary string escaping rules
    apply; only newlines and the character used to quote the string need
    to be escaped.)</p>
  </blockquote>
  
  <p>at</p>
  
  <blockquote>
    <p><a href="https://www.w3.org/TR/css-values/#typedef-url-modifier"><strong>3.4.2. URL Modifiers</strong></a></p>
    
    <p>The <code>url()</code> function supports specifying additional <code>&lt;url-modifier&gt;</code>s,
    which change the meaning or the interpretation of the URL somehow. A
    <code>&lt;url-modifier&gt;</code> is either an <a href="http://dev.w3.org/csswg/mediaqueries-4/#typedef-ident"><code>&lt;ident&gt;</code></a> or a <a href="http://dev.w3.org/csswg/css-syntax-3/#function">function</a>.</p>
    
    <p>This specification does not define any <code>&lt;url-modifier&gt;</code>s, but other
    specs may do so.</p>
  </blockquote>
  
  <p>See also <a href="https://drafts.csswg.org/css-values/#biblio-whatwg-url">CSS Values and Units Module Level 3
  Editor’s Draft, 21 March 2016</a></p>
  
  <hr>
  
  <ul>
  <li><p>What are example usages of <code>&lt;ident&gt;</code> and <code>function</code> at <code>url()</code> ?</p></li>
  <li><p>What are differences between <code>&lt;string&gt;</code> , <code>&lt;ident&gt;</code>, <code>function</code> at <code>url()</code> ? </p></li>
  </ul>