CSS url() Function
The url() function is an inbuilt function that is used to include a file. The parameter of this function is absolute URL, relative URL or a data URI. The url() function can be used for background-image, border-image, list-style-image, content, cursor, border-image, border-image-source, src as part of a @font-face block, and @counter-style/symbol.
Syntax:
url( <string> <url-modifier>* )Parameters: This function accepts a single parameter url which holds the url in string format.
The examples of url are:
<css_property>: url("https://geeksforgeeks.org/image.png")
<css_property>: url('https://geeksforgeeks.org/image.png')
<css_property>: url(https://geeksforgeeks.org/image.png)
Example: Below example illustrates the url() function in CSS:
<!DOCTYPE html>
<html>
<head>
<title>CSS url() function</title>
<style>
body {
background-image: url(
"https://media.geeksforgeeks.org/wp-content/cdn-uploads/20190710102234/download3.png");
text-align: center;
}
h1 {
color: white;
}
</style>
</head>
<body>
<h1>GeeksforGeeks</h1>
<h2>CSS url() function</h2>
</body>
</html>
Output:
Supported Browsers: The browsers supported by url() function are listed below:
- Google Chrome 1
- Edge 12
- Internet Explorer 3
- Firefox 1
- Safari 1
- Opera 3.5
CSS url() Function – FAQs
What does the url() function do in CSS?
The url() function is used to include external resources like images, fonts, and other files in CSS properties such as background, content, or src.
How do you use the url() function in CSS?
Use url(‘path/to/file’); to specify the location of the file, such as background-image: url(‘image.png’);.
Can url() be used with relative and absolute paths?
Yes, the url function accepts both relative paths (relative to the CSS file) and absolute URLs (full web addresses).
What are common uses for the url() function in CSS?
Common uses include adding background images, linking fonts, setting list item markers, and embedding content with the content property.
Does the url() function support different file types?
Yes, url supports various file types, including images (JPG, PNG, SVG), fonts (WOFF, TTF), and other media depending on the CSS property used.
