{"id":5139,"date":"2022-09-27T12:00:02","date_gmt":"2022-09-27T06:30:02","guid":{"rendered":"https:\/\/btechgeeks.com\/?p=5139"},"modified":"2022-09-27T12:25:12","modified_gmt":"2022-09-27T06:55:12","slug":"css-url","status":"publish","type":"post","link":"https:\/\/btechgeeks.com\/css-url\/","title":{"rendered":"CSS url() Function &#8211; Definition, Syntax | CSS url Image Path | Examples for Absolute, Relative URL() Function in CSS"},"content":{"rendered":"<p><strong>url() css: <\/strong>If we are talking about background images, we can use @import. CSS has a wide range of properties that can reference an image file, display that file on the image as a part of the element&#8217;s background. Of all those, we use CSS Image Syntax url() to load up a resource. From this tutorial, you will find the full details about the CSS URL() function like definition, syntax, supported browsers, properties that accept URL as a Value, and example programs.<\/p>\n<ul>\n<li><a href=\"#CSS_url()_Function\">CSS url() Function<\/a><\/li>\n<li><a href=\"#Syntax\">Syntax<\/a><\/li>\n<li><a href=\"#Parameters\">Parameters<\/a><\/li>\n<li><a href=\"#Values\">Values<\/a><\/li>\n<li><a href=\"#Some_times_url()_is_Optional\">Some times url() is Optional<\/a><\/li>\n<li><a href=\"#Absolute_Vs_Relatieve_URL\">Absolute Vs Relatieve URL<\/a><\/li>\n<li><a href=\"#Supported_Browsers\">Supported Browsers<\/a><\/li>\n<li><a href=\"#Properties_that_accept_URL_as_a_Value\">Properties that accept URL as a Value<\/a><\/li>\n<li><a href=\"#Usage_of_CSS_url()_function_in_Filter\">Usage of CSS url() function in Filter<\/a><\/li>\n<li><a href=\"#Examples_using_url()_in_CSS\">Examples using url() in CSS<\/a><\/li>\n<li><a href=\"#Example_of_Usage_in_the_content_property\">Example of Usage in the content property<\/a><\/li>\n<\/ul>\n<h2><a id=\"CSS_url()_Function\"><\/a>CSS url() Function<\/h2>\n<p><strong>CSS url function: <\/strong>To include a file, we use the inbuilt function ie., url() CSS function. The parameter is an absolute URL, a relative URL, or a data URL. The url() function can be passed as a parameter of another CSS function, like the attr() function. Based on the property for which it is a value, the resource queried can be an image, font, or stylesheet. The url() functional representation is the value for the &lt;url&gt; data type.<\/p>\n<h3><a id=\"Syntax\"><\/a>Syntax<\/h3>\n<pre>url( &lt;string&gt; &lt;url-modifier&gt;* )<\/pre>\n<p><strong>css url: <\/strong>String indicates the URL or ID of an SVG Shape. (*) asterisk denotes that the preceding group occurs zero or more times.<\/p>\n<p><strong>&lt;URL&gt;\u00a0<\/strong><\/p>\n<p><strong>css url(): <\/strong>An URL is a relative or Absolute Address or Pointer for which the web resource is included or a data uri in single or double-quotes. Quotes are necessary if an URL includes Parentheses, whitespace, or quotes unless these characters are escaped, or if addresses include control characters above 0x7e. Double Quotes can&#8217;t occur inside double quotes and single quotes can&#8217;t occur within single quotes unless escaped.<\/p>\n<p>If you want to write an URL without Quotes, you can use a backslash(\\) before any paratheses, whitespace characters or single quotes, double quotes that are part of the URL.<\/p>\n<p><strong>Path<\/strong><\/p>\n<p>It References SVG Shape&#8217;s ID &#8212; circle, ellipse, line, path, polygon, polyline, or rect by using the shape&#8217;s geometry as the path.<\/p>\n<p><strong>&lt;url-modifier&gt;<\/strong><\/p>\n<p>In the coming future url() function can support specifying a modifier, functional notation, or identifier that alters the URL String Meaning. As of now, it is not fully defined and supported.<\/p>\n<h3><a id=\"Parameters\"><\/a>Parameters<\/h3>\n<p>This function allows a single parameter url that holds the url in string format. The following examples of url are such as:<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"css\">&lt;css_property&gt;: url(\"https:\/\/btechgeeks.com\/image.png\")\r\n&lt;css_property&gt;: url('https:\/\/btechgeeks.com\/image.png')\r\n&lt;css_property&gt;: url(https:\/\/betchgeeks.com\/image.png)<\/pre>\n<h3><a id=\"Values\"><\/a>Values<\/h3>\n<p>The url() function can be added as a value for <code>background<\/code>, <code>background-image<\/code>, <code>list-style<\/code>, <code>list-style-image<\/code>,<code>content<\/code>, <code>cursor<\/code>, <code>border<\/code>, <code>border-image<\/code>,<code>border-image-source<\/code>, <code>mask<\/code>, <code>mask-image<\/code>, src in the context of a <code>@font-face block<\/code>, and <code>@counter-style\/symbol<\/code><\/p>\n<h3><a id=\"Some_times_url()_is_Optional\"><\/a>Some times url() is Optional<\/h3>\n<p>At times, url() functional notation is optional. For suppose when you use the @import rule, you can omit the URL() and simply provide a &lt;string&gt; for the url.<\/p>\n<h3><a id=\"Absolute_Vs_Relatieve_URL\"><\/a>Absolute Vs Relatieve URL<\/h3>\n<p>You can choose between Absolute URL, Relative URL, and Root-Relative URL as the Parameter as all of them are valid.<\/p>\n<pre>\/* Absolute URL *\/\r\nbackground-image: url(http:\/\/www.btechgeeks.com\/images\/image.png);\r\n\u200b\r\n\/* Relative URLs *\/\r\nbackground-image: url(image.png);\r\nbackground-image: url(..\/images\/image.png);\r\n\u200b\r\n\/* Root-relative URL *\/\r\nbackground-image: url(\/images\/image.png);<\/pre>\n<p><span style=\"color: #ff6600;\">Also Check:<\/span><\/p>\n<ul>\n<li><a href=\"https:\/\/btechgeeks.com\/css-pseudo-classes\/\">CSS Pseudo Classes<\/a><\/li>\n<li><a href=\"https:\/\/btechgeeks.com\/css-inheritance\/\">CSS Inheritance<\/a><\/li>\n<\/ul>\n<h3><a id=\"Supported_Browsers\"><\/a>Supported Browsers<\/h3>\n<p>The browsers supported by url() function are as follows:<\/p>\n<ul>\n<li>Google Chrome<\/li>\n<li>Internet Explorer<\/li>\n<li>Firefox<\/li>\n<li>Safari<\/li>\n<li>Opera<\/li>\n<\/ul>\n<h3><a id=\"Properties_that_accept_URL_as_a_Value\"><\/a>Properties that accept URL as a Value<\/h3>\n<ul>\n<li>background-image<\/li>\n<li>border-image<\/li>\n<li>content<\/li>\n<li>list-style-image<\/li>\n<\/ul>\n<h3><a id=\"Usage_of_CSS_url()_function_in_Filter\"><\/a>Usage of CSS url() function in Filter<\/h3>\n<p>If you use an URL as a path for filter the URL needs to meet the following criteria and they are as below<\/p>\n<ul>\n<li>The Path to an SVG File should be appended with filter ID.<\/li>\n<li>Should consist ID of the filter if an SVG already exists on the page.<\/li>\n<\/ul>\n<pre>.blur {\r\nfilter: url(my-file.svg#svg-blur); \/* the URL of an SVG file used as a filter *\/\r\n}\r\n\r\n.inline-blur {\r\nfilter: url(#svg-blur); \/* the ID of an SVG that is embedded in the HTML page *\/\r\n}<\/pre>\n<h2><a id=\"Examples_using_url()_in_CSS\"><\/a>Examples using url() in CSS<\/h2>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"css\">section {\r\n  background-image: url(picture.png);\r\n}<\/pre>\n<p>This is a relative URL which means that it will search for the file inside the same folder.<\/p>\n<p><img loading=\"lazy\" class=\"size-full wp-image-17969 aligncenter\" src=\"https:\/\/btechgeeks.com\/wp-content\/uploads\/2021\/08\/Relative-url-Usage-in-CSS.png\" alt=\"Relative url() Usage in CSS\" width=\"462\" height=\"276\" srcset=\"https:\/\/btechgeeks.com\/wp-content\/uploads\/2021\/08\/Relative-url-Usage-in-CSS.png 462w, https:\/\/btechgeeks.com\/wp-content\/uploads\/2021\/08\/Relative-url-Usage-in-CSS-300x179.png 300w\" sizes=\"(max-width: 462px) 100vw, 462px\" \/><\/p>\n<p>We can go back to one folder:<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\">section { \r\n    background-image: url(..\/picture.png); \r\n}<\/pre>\n<p>Or can go into a folder<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\">section { \r\n    background-image: url(someFolder\/picture.png); \r\n}<\/pre>\n<p>Or can directly load from the root folder of the CSS<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\">section { \r\n    background-image: url(\/picture.png); \r\n}<\/pre>\n<p>Or we can directly fetch from some website<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\">section { \r\n    background-image: url(https:\/\/example.com\/picture.png); \r\n}<\/pre>\n<h3><a id=\"Example_of_Usage_in_the_content_property\"><\/a>Example of Usage in the Content Property<\/h3>\n<p><strong>HTML<\/strong><\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"html\">&lt;ul&gt;\r\n  &lt;li&gt;Item 1&lt;\/li&gt;\r\n  &lt;li&gt;Item 2&lt;\/li&gt;\r\n  &lt;li&gt;Item 3&lt;\/li&gt;\r\n&lt;\/ul&gt;<\/pre>\n<p><strong>CSS<\/strong><\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"css\">li::after {\r\n  content: ' - ' url(https:\/\/mdn.mozillademos.org\/files\/16761\/star.gif);\r\n}<\/pre>\n<p><strong>OUTPUT<\/strong><\/p>\n<p><img loading=\"lazy\" class=\"alignnone size-full wp-image-6387\" src=\"https:\/\/btechgeeks.com\/wp-content\/uploads\/2021\/05\/css-url-function-example-result.png\" alt=\"css url() function example result\" width=\"222\" height=\"97\" \/><\/p>\n","protected":false},"excerpt":{"rendered":"<p>url() css: If we are talking about background images, we can use @import. CSS has a wide range of properties that can reference an image file, display that file on the image as a part of the element&#8217;s background. Of all those, we use CSS Image Syntax url() to load up a resource. From this &#8230; <a title=\"CSS url() Function &#8211; Definition, Syntax | CSS url Image Path | Examples for Absolute, Relative URL() Function in CSS\" class=\"read-more\" href=\"https:\/\/btechgeeks.com\/css-url\/\" aria-label=\"More on CSS url() Function &#8211; Definition, Syntax | CSS url Image Path | Examples for Absolute, Relative URL() Function in CSS\">Read more<\/a><\/p>\n","protected":false},"author":5,"featured_media":6388,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"spay_email":""},"categories":[7,8],"tags":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v17.2 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>CSS url() Function - Definition, Syntax | CSS url Image Path | Examples for Absolute, Relative URL() Function in CSS - BTech Geeks<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/btechgeeks.com\/css-url\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"CSS url() Function - Definition, Syntax | CSS url Image Path | Examples for Absolute, Relative URL() Function in CSS - BTech Geeks\" \/>\n<meta property=\"og:description\" content=\"url() css: If we are talking about background images, we can use @import. CSS has a wide range of properties that can reference an image file, display that file on the image as a part of the element&#8217;s background. Of all those, we use CSS Image Syntax url() to load up a resource. From this ... Read more\" \/>\n<meta property=\"og:url\" content=\"https:\/\/btechgeeks.com\/css-url\/\" \/>\n<meta property=\"og:site_name\" content=\"BTech Geeks\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/btechgeeks\" \/>\n<meta property=\"article:published_time\" content=\"2022-09-27T06:30:02+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2022-09-27T06:55:12+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/btechgeeks.com\/wp-content\/uploads\/2021\/05\/CSS-url.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1280\" \/>\n\t<meta property=\"og:image:height\" content=\"720\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@btech_geeks\" \/>\n<meta name=\"twitter:site\" content=\"@btech_geeks\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Mainak\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"4 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Organization\",\"@id\":\"https:\/\/btechgeeks.com\/#organization\",\"name\":\"BTech Geeks\",\"url\":\"https:\/\/btechgeeks.com\/\",\"sameAs\":[\"https:\/\/www.facebook.com\/btechgeeks\",\"https:\/\/www.instagram.com\/btechgeeks\/\",\"https:\/\/www.linkedin.com\/in\/btechgeeks\",\"https:\/\/www.youtube.com\/channel\/UC9MlCqdJ3lKqz2p5114SDIg\",\"https:\/\/in.pinterest.com\/btechgeek\/\",\"https:\/\/twitter.com\/btech_geeks\"],\"logo\":{\"@type\":\"ImageObject\",\"@id\":\"https:\/\/btechgeeks.com\/#logo\",\"inLanguage\":\"en-US\",\"url\":\"https:\/\/btechgeeks.com\/wp-content\/uploads\/2020\/11\/BTechGeeks.png\",\"contentUrl\":\"https:\/\/btechgeeks.com\/wp-content\/uploads\/2020\/11\/BTechGeeks.png\",\"width\":350,\"height\":70,\"caption\":\"BTech Geeks\"},\"image\":{\"@id\":\"https:\/\/btechgeeks.com\/#logo\"}},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/btechgeeks.com\/#website\",\"url\":\"https:\/\/btechgeeks.com\/\",\"name\":\"BTech Geeks\",\"description\":\"Lecture Notes for BTech, BSc Students\",\"publisher\":{\"@id\":\"https:\/\/btechgeeks.com\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/btechgeeks.com\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":\"ImageObject\",\"@id\":\"https:\/\/btechgeeks.com\/css-url\/#primaryimage\",\"inLanguage\":\"en-US\",\"url\":\"https:\/\/btechgeeks.com\/wp-content\/uploads\/2021\/05\/CSS-url.png\",\"contentUrl\":\"https:\/\/btechgeeks.com\/wp-content\/uploads\/2021\/05\/CSS-url.png\",\"width\":1280,\"height\":720},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/btechgeeks.com\/css-url\/#webpage\",\"url\":\"https:\/\/btechgeeks.com\/css-url\/\",\"name\":\"CSS url() Function - Definition, Syntax | CSS url Image Path | Examples for Absolute, Relative URL() Function in CSS - BTech Geeks\",\"isPartOf\":{\"@id\":\"https:\/\/btechgeeks.com\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/btechgeeks.com\/css-url\/#primaryimage\"},\"datePublished\":\"2022-09-27T06:30:02+00:00\",\"dateModified\":\"2022-09-27T06:55:12+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/btechgeeks.com\/css-url\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/btechgeeks.com\/css-url\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/btechgeeks.com\/css-url\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/btechgeeks.com\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"CSS url() Function &#8211; Definition, Syntax | CSS url Image Path | Examples for Absolute, Relative URL() Function in CSS\"}]},{\"@type\":\"Article\",\"@id\":\"https:\/\/btechgeeks.com\/css-url\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/btechgeeks.com\/css-url\/#webpage\"},\"author\":{\"@id\":\"https:\/\/btechgeeks.com\/#\/schema\/person\/5114764f7e49b863eeb23d48d4b5ad63\"},\"headline\":\"CSS url() Function &#8211; Definition, Syntax | CSS url Image Path | Examples for Absolute, Relative URL() Function in CSS\",\"datePublished\":\"2022-09-27T06:30:02+00:00\",\"dateModified\":\"2022-09-27T06:55:12+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/btechgeeks.com\/css-url\/#webpage\"},\"wordCount\":666,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/btechgeeks.com\/#organization\"},\"image\":{\"@id\":\"https:\/\/btechgeeks.com\/css-url\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/btechgeeks.com\/wp-content\/uploads\/2021\/05\/CSS-url.png\",\"articleSection\":[\"CSS\",\"HTML\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/btechgeeks.com\/css-url\/#respond\"]}]},{\"@type\":\"Person\",\"@id\":\"https:\/\/btechgeeks.com\/#\/schema\/person\/5114764f7e49b863eeb23d48d4b5ad63\",\"name\":\"Mainak\",\"image\":{\"@type\":\"ImageObject\",\"@id\":\"https:\/\/btechgeeks.com\/#personlogo\",\"inLanguage\":\"en-US\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/4deb036563795a02d0b2b38bbb37426a?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/4deb036563795a02d0b2b38bbb37426a?s=96&d=mm&r=g\",\"caption\":\"Mainak\"},\"url\":\"https:\/\/btechgeeks.com\/author\/mainak\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"CSS url() Function - Definition, Syntax | CSS url Image Path | Examples for Absolute, Relative URL() Function in CSS - BTech Geeks","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/btechgeeks.com\/css-url\/","og_locale":"en_US","og_type":"article","og_title":"CSS url() Function - Definition, Syntax | CSS url Image Path | Examples for Absolute, Relative URL() Function in CSS - BTech Geeks","og_description":"url() css: If we are talking about background images, we can use @import. CSS has a wide range of properties that can reference an image file, display that file on the image as a part of the element&#8217;s background. Of all those, we use CSS Image Syntax url() to load up a resource. From this ... Read more","og_url":"https:\/\/btechgeeks.com\/css-url\/","og_site_name":"BTech Geeks","article_publisher":"https:\/\/www.facebook.com\/btechgeeks","article_published_time":"2022-09-27T06:30:02+00:00","article_modified_time":"2022-09-27T06:55:12+00:00","og_image":[{"width":1280,"height":720,"url":"https:\/\/btechgeeks.com\/wp-content\/uploads\/2021\/05\/CSS-url.png","path":"\/home\/491864.cloudwaysapps.com\/mrabupnujf\/public_html\/wp-content\/uploads\/2021\/05\/CSS-url.png","size":"full","id":6388,"alt":"","pixels":921600,"type":"image\/png"}],"twitter_card":"summary_large_image","twitter_creator":"@btech_geeks","twitter_site":"@btech_geeks","twitter_misc":{"Written by":"Mainak","Est. reading time":"4 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Organization","@id":"https:\/\/btechgeeks.com\/#organization","name":"BTech Geeks","url":"https:\/\/btechgeeks.com\/","sameAs":["https:\/\/www.facebook.com\/btechgeeks","https:\/\/www.instagram.com\/btechgeeks\/","https:\/\/www.linkedin.com\/in\/btechgeeks","https:\/\/www.youtube.com\/channel\/UC9MlCqdJ3lKqz2p5114SDIg","https:\/\/in.pinterest.com\/btechgeek\/","https:\/\/twitter.com\/btech_geeks"],"logo":{"@type":"ImageObject","@id":"https:\/\/btechgeeks.com\/#logo","inLanguage":"en-US","url":"https:\/\/btechgeeks.com\/wp-content\/uploads\/2020\/11\/BTechGeeks.png","contentUrl":"https:\/\/btechgeeks.com\/wp-content\/uploads\/2020\/11\/BTechGeeks.png","width":350,"height":70,"caption":"BTech Geeks"},"image":{"@id":"https:\/\/btechgeeks.com\/#logo"}},{"@type":"WebSite","@id":"https:\/\/btechgeeks.com\/#website","url":"https:\/\/btechgeeks.com\/","name":"BTech Geeks","description":"Lecture Notes for BTech, BSc Students","publisher":{"@id":"https:\/\/btechgeeks.com\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/btechgeeks.com\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":"ImageObject","@id":"https:\/\/btechgeeks.com\/css-url\/#primaryimage","inLanguage":"en-US","url":"https:\/\/btechgeeks.com\/wp-content\/uploads\/2021\/05\/CSS-url.png","contentUrl":"https:\/\/btechgeeks.com\/wp-content\/uploads\/2021\/05\/CSS-url.png","width":1280,"height":720},{"@type":"WebPage","@id":"https:\/\/btechgeeks.com\/css-url\/#webpage","url":"https:\/\/btechgeeks.com\/css-url\/","name":"CSS url() Function - Definition, Syntax | CSS url Image Path | Examples for Absolute, Relative URL() Function in CSS - BTech Geeks","isPartOf":{"@id":"https:\/\/btechgeeks.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/btechgeeks.com\/css-url\/#primaryimage"},"datePublished":"2022-09-27T06:30:02+00:00","dateModified":"2022-09-27T06:55:12+00:00","breadcrumb":{"@id":"https:\/\/btechgeeks.com\/css-url\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/btechgeeks.com\/css-url\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/btechgeeks.com\/css-url\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/btechgeeks.com\/"},{"@type":"ListItem","position":2,"name":"CSS url() Function &#8211; Definition, Syntax | CSS url Image Path | Examples for Absolute, Relative URL() Function in CSS"}]},{"@type":"Article","@id":"https:\/\/btechgeeks.com\/css-url\/#article","isPartOf":{"@id":"https:\/\/btechgeeks.com\/css-url\/#webpage"},"author":{"@id":"https:\/\/btechgeeks.com\/#\/schema\/person\/5114764f7e49b863eeb23d48d4b5ad63"},"headline":"CSS url() Function &#8211; Definition, Syntax | CSS url Image Path | Examples for Absolute, Relative URL() Function in CSS","datePublished":"2022-09-27T06:30:02+00:00","dateModified":"2022-09-27T06:55:12+00:00","mainEntityOfPage":{"@id":"https:\/\/btechgeeks.com\/css-url\/#webpage"},"wordCount":666,"commentCount":0,"publisher":{"@id":"https:\/\/btechgeeks.com\/#organization"},"image":{"@id":"https:\/\/btechgeeks.com\/css-url\/#primaryimage"},"thumbnailUrl":"https:\/\/btechgeeks.com\/wp-content\/uploads\/2021\/05\/CSS-url.png","articleSection":["CSS","HTML"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/btechgeeks.com\/css-url\/#respond"]}]},{"@type":"Person","@id":"https:\/\/btechgeeks.com\/#\/schema\/person\/5114764f7e49b863eeb23d48d4b5ad63","name":"Mainak","image":{"@type":"ImageObject","@id":"https:\/\/btechgeeks.com\/#personlogo","inLanguage":"en-US","url":"https:\/\/secure.gravatar.com\/avatar\/4deb036563795a02d0b2b38bbb37426a?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/4deb036563795a02d0b2b38bbb37426a?s=96&d=mm&r=g","caption":"Mainak"},"url":"https:\/\/btechgeeks.com\/author\/mainak\/"}]}},"jetpack_featured_media_url":"https:\/\/btechgeeks.com\/wp-content\/uploads\/2021\/05\/CSS-url.png","jetpack-related-posts":[{"id":4780,"url":"https:\/\/btechgeeks.com\/how-to-invert-colors-using-css\/","url_meta":{"origin":5139,"position":0},"title":"Invert colors css - How to invert colors using CSS | Invert() CSS Function Definition, Syntax, Parameter, Example Program","date":"September 9, 2022","format":false,"excerpt":"Invert colors css:\u00a0Do you know there is an option to invert the color of every element on a page? The invert()CSS function inverts the color samples in the input image. And its conclusion is a <filter-function>. In this tutorial, you can easily learn How to invert colors of elements and\u2026","rel":"","context":"In &quot;CSS&quot;","img":{"alt_text":"How to invert colors using CSS","src":"https:\/\/i2.wp.com\/btechgeeks.com\/wp-content\/uploads\/2021\/04\/How-to-invert-colors-using-CSS.png?resize=350%2C200&ssl=1","width":350,"height":200},"classes":[]},{"id":4784,"url":"https:\/\/btechgeeks.com\/how-to-disable-text-selection-using-css\/","url_meta":{"origin":5139,"position":1},"title":"How to disable text selection using CSS | user-select Property Definition, Syntax, Values | Steps to Disable Text Selection","date":"March 1, 2023","format":false,"excerpt":"Texts are the most fundamental elements of any website or web page. In this tutorial, we have shared how to disable text selection highlighting using CSS? Along with the CSS user-select Property definition and usage, syntax, values,\u00a0 supported browsers, Steps to disable the text selection with CSS, and Example Codes\u2026","rel":"","context":"In &quot;CSS&quot;","img":{"alt_text":"How to disable text selection using CSS","src":"https:\/\/i1.wp.com\/btechgeeks.com\/wp-content\/uploads\/2021\/04\/How-to-disable-text-selection-using-CSS.png?resize=350%2C200&ssl=1","width":350,"height":200},"classes":[]},{"id":6140,"url":"https:\/\/btechgeeks.com\/css-variables-custom-properties\/","url_meta":{"origin":5139,"position":2},"title":"CSS Variables (Custom Properties) - Syntax, Limitations | Reasons to Use Variables in CSS","date":"March 5, 2023","format":false,"excerpt":"If you are working with CSS you might have known by now how difficult it is to keep the Code neat in CSS. Using the Same Values in Different Rules can be a difficult task and there are chances of errors. In the case of bigger projects, making changes can\u2026","rel":"","context":"In &quot;CSS&quot;","img":{"alt_text":"CSS Variables (Custom Properties)","src":"https:\/\/i2.wp.com\/btechgeeks.com\/wp-content\/uploads\/2021\/05\/CSS-Variables-Custom-Properties.png?resize=350%2C200&ssl=1","width":350,"height":200},"classes":[]},{"id":4876,"url":"https:\/\/btechgeeks.com\/the-css-backgrounds-tutorial\/","url_meta":{"origin":5139,"position":3},"title":"The CSS Backgrounds Tutorial | Properties, Values, Syntax & Example Programs on Backgrounds in CSS","date":"March 2, 2023","format":false,"excerpt":"The CSS background property permits you to control the background of any element (what paints underneath the content in that element). Background property in CSS is a shorthand property, which means that it provides you to communicate what would be various CSS properties in one. Constituent Properties of CSS Background\u2026","rel":"","context":"In &quot;CSS&quot;","img":{"alt_text":"The CSS Backgrounds Tutorial","src":"https:\/\/i1.wp.com\/btechgeeks.com\/wp-content\/uploads\/2021\/04\/The-CSS-Backgrounds-Tutorial.png?resize=350%2C200&ssl=1","width":350,"height":200},"classes":[]},{"id":4847,"url":"https:\/\/btechgeeks.com\/the-css-calc-function\/","url_meta":{"origin":5139,"position":4},"title":"The CSS calc() function | Definition, Syntax & Example | Nested calc() with CSS Variables","date":"August 27, 2022","format":false,"excerpt":"CSS calc variables: The calc() functions help us to perform the basic mathematic operations in the stylesheet itself. It specifically helps us to calculate, suppose, the size of the body except for the header and footer. Also, it supports us to subtract or add some absolute value with a percentage\u2026","rel":"","context":"In &quot;CSS&quot;","img":{"alt_text":"The CSS calc() function","src":"https:\/\/i1.wp.com\/btechgeeks.com\/wp-content\/uploads\/2021\/04\/The-CSS-calc-function.png?resize=350%2C200&ssl=1","width":350,"height":200},"classes":[]},{"id":4845,"url":"https:\/\/btechgeeks.com\/importing-a-css-file-using-import\/","url_meta":{"origin":5139,"position":5},"title":"Importing a CSS file using @import with Example Program | Definition & Syntax of CSS @import Property","date":"March 2, 2023","format":false,"excerpt":"Are you looking for the best ways to import another CSS file into CSS files? Then, you can simply use the CSS @import property. Want to know more about the property of CSS import? Just follow this tutorial till to the end and get information on Importing a CSS File\u2026","rel":"","context":"In &quot;CSS&quot;","img":{"alt_text":"Importing a CSS file using @import","src":"https:\/\/i0.wp.com\/btechgeeks.com\/wp-content\/uploads\/2021\/04\/Importing-a-CSS-file-using-@import.png?resize=350%2C200&ssl=1","width":350,"height":200},"classes":[]}],"_links":{"self":[{"href":"https:\/\/btechgeeks.com\/wp-json\/wp\/v2\/posts\/5139"}],"collection":[{"href":"https:\/\/btechgeeks.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/btechgeeks.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/btechgeeks.com\/wp-json\/wp\/v2\/users\/5"}],"replies":[{"embeddable":true,"href":"https:\/\/btechgeeks.com\/wp-json\/wp\/v2\/comments?post=5139"}],"version-history":[{"count":4,"href":"https:\/\/btechgeeks.com\/wp-json\/wp\/v2\/posts\/5139\/revisions"}],"predecessor-version":[{"id":38582,"href":"https:\/\/btechgeeks.com\/wp-json\/wp\/v2\/posts\/5139\/revisions\/38582"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/btechgeeks.com\/wp-json\/wp\/v2\/media\/6388"}],"wp:attachment":[{"href":"https:\/\/btechgeeks.com\/wp-json\/wp\/v2\/media?parent=5139"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/btechgeeks.com\/wp-json\/wp\/v2\/categories?post=5139"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/btechgeeks.com\/wp-json\/wp\/v2\/tags?post=5139"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}