CSS Function - url()

The url() function in CSS is useful in adding a file (image or a font file), through a path. The parameter of this function can be either an absolute URL, a relative URL, a blob URL, or a data URL.

  • The function url() can also be passed as a parameter to other CSS functions, such as attr() function.

  • Based on the property to which, the url() is a value, the resource that will be sought can be either an image, a font or a stylesheet.

  • For the <url> data type, the url() functional notation is the value.

Relative URLs are relative to the URL of the stylesheet and not to the webpage.

The url() function can be contained as a value for following properties:

URI and URL are different from each other, where URI is a resource and URL is a type of URI that describes the location of the resource. URI can be a URL or name of the resource.

Possible values

The url() function can have following value:

<string>: lists a string that can either be the URL or the ID of an SVG shape. Let's see each of these in tkhe following sections:

<url>

  • An URL that is a relative or absolute URL, or pointer to a web resource or a data URL, can be specified in single or double quotes, optionally.

  • Quotes are a must when the URL includes parentheses, whitespace, or quotes.

  • Quotes are also required when the address includes control characters above 0x7e.

  • Unless escaped, single quotes can not be used inside single quotes and the same is applied to double quotes as well.

  • In case you want to write the URL without the quotes, then use a backslash (\) before any parentheses, whitespace characters, single quotes and double quotes that are included in the URL.

Following cases are valid and equivalent:

<css_property>: url("images/logo.png")
<css_property>: url('images/logo.png')
<css_property>: url(images/logo.png)

path

  • Signifies the ID of an SVG shape.

  • The shapes can be circle, ellipse, line, path, polygon, polyline, or rect.

  • Shape's geometry is used as path.

Syntax

url( <string> <url-modifier>* )

CSS url() - With background-image Property

In the following example the url() function is used with the property background-image:

<html>
<head>
<style>
   div {
      width: 200px;
      height: 200px;
      background-image: url(images/border.png);
      border: 5px inset black;
   }
</style>
</head>
<body>
   <h2>use of url() with background property</h2>
   <div></div>
</body>
</html>

CSS url() - With pseudo-element ::before

In the following example the url() function is used with the pseudo-element ::before against the property:

<html>
<head>
<style>
   div {
      width: 200px;
      height: 200px;
      background-image: url(images/border.png);
      border: 5px inset black;
   }

   li::before {
      content: url(images/smiley.png);
   }
   
   li {
      padding: 5px;
   }
</style>
</head>
<body>
   <h2>use of url() with pseudo-element ::before</h2>
   <div>
      <ul>
         <li>  Item 1</li>
         <li>  Item 2</li>
      </ul>
   </div>
</body>
</html>
Advertisements