The CSS url() function is used to include external resources in your styles, such as background images, fonts, or other media files. It tells the browser where to find the file you want to include.

Syntax

selector {
  property: url('path/to/resource');
}

Explanation:

• property: The CSS property that will use the external resource (e.g., background-image, list-style-image, or src in @font-face).
• url('path/to/resource'): The function that wraps the resource's path, which can be a relative or absolute URL.

Example 1: Background Image Using url()

This example sets a background image for a container. The url() function is used to load the image from an external source.

Explanation:

• Background Image:
  • Uses url('https://img.freepik.com/free-vector/blue-curve-frame-template_53876-116707.jpg') to load an image from a placeholder service.
• Outcome:
  • The .background-box appears with the specified background image covering the entire area, centered appropriately.

Example 2: List Item Marker Using url()

This example uses the url() function to set a custom image as a marker for list items.

Explanation:

• Custom Marker:
  • The CSS rule sets the background property of each list item using url('https://img.freepik.com/free-vector/blue-curve-frame-template_53876-116707.jpg').
  • The marker is positioned to the left center, and padding is added to allow space for the image.
• Outcome:
  • Each list item displays the custom marker image before the text, replacing the default bullet.

Using the url() function, you can enhance your web designs by easily incorporating external resources directly within your CSS styles.