Funkcja CSS url() służy do dołączania plików w arkuszach stylów. Najczęściej używa się jej do dołączania obrazów graficznych, aby np. ustawić obraz w tle elementu albo jako ikonę kursora, ale za jej pomocą można także wskazywać położenie fontów i arkuszy stylów.
W opisach własności w specyfikacjach CSS funkcja url() jest oznaczana jako typ danych symbolem <url>, tzn. jeśli dana własność przyjmuje adres URL zasobu jako wartość, to jest to oznaczone właśnie za pomocą tego symbolu. Na przykład, poniżej znajduje się fragment definicji wartości własności cursor ze specyfikacji CSS Basic User Interface Module Level 4.
Value: [ [ <url> | <url-set> ] [<x> <y>]? ]#?Ten zapis oznacza, że własność ta jako wartość przyjmuje między innymi funkcję url().
Wartości i składnia
Funkcja url() jako wartość przyjmuje łańcuch reprezentujący adres URL lub ścieżkę SVG. Istnieje wiele typów adresów URL. Poniżej znajduje się opis paru najczęściej spotykanych w kontekście tej funkcji.
Adres ten może być zarówno względny, jak i bezwzględny. Jeśli jest względny, to należy pamiętać, że odnosi się do adresu URL arkusza stylów, w którym użyto funkcji url(), a nie np. do katalogu głównego witryny lub jeszcze czegoś innego. Zobacz przykład Adresy względne i bezwzględne poniżej.
Dodatkowo wartością funkcji CSS url() może być tzw. URL danych (ang. data URL), czyli specjalny typ adresu URL służący do osadzania małych plików bezpośrednio w dokumentach. Zobacz przykład Użycie URL danych w funkcji url().
Wartość funkcji url() może być ujęta w cudzysłów pojedynczy lub podwójny albo może występować bez cudzysłowu. Jeśli żaden rodzaj cudzysłowu nie zostanie użyty, to wszystkie znaki białe, nawiasów oraz cudzysłowów występujące w adresie muszą być opatrzone znakiem ukośnika wstecznego (\).
Ponadto należy pamiętać, że w cudzysłowach podwójnych nie można używać cudzysłowów podwójnych (chyba że opatrzonych ukośnikiem wstecznym), a w cudzysłowach pojedynczych nie można używać cudzysłowów pojedynczych (chyba że również opatrzy się je ukośnikiem wstecznym). Dodatkowo w każdym rodzaju cudzysłowu obowiązkowe jest opatrzenie ukośnikiem wstecznym znaku nowego wiersza, jeśli zostanie użyty.
Jeśli wartość funkcji url() jest pusta, np. url('') albo url(""), to jest ona traktowana jako nieprawidłowe odwołanie do zasobu.
Przykłady
Poniżej znajduje się bardzo prosty przykład użycia funkcji CSS url() do ustawienia obrazu w tle elementu.
background-image: url("obraz.png");Dołączanie arkusza stylów za pomocą funkcji url()
Poniższa reguła @import dołącza arkusz stylów style.css znajdujący się w katalogu głównym witryny.
@import url("/style.css");Dołączanie fontu za pomocą funkcji url()
Poniższa deklaracja CSS dołącza do arkusza stylów font o nazwie czcionka.woff.
src: url("https://shebang.pl/czcionka.woff");Adresy względne i bezwzględne w funkcji url()
/* Adres bezwzględny */
background-image: url("https://shebang.pl/obraz.png");
/* Adres względny - jeśli ścieżka do arkusza stylów to https://shebang.pl/src/style.css, to ścieżką do pliku obraz.png jest https://shebang.pl/src/obraz.png */
background-image: url("obraz.png");Użycie URL danych w funkcji url()
background: no-repeat center url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAAA8CAYAAADWibxkAAAACXBIWXMAAAsTAAALEwEAmpwYAAAGMGlUWHRYTUw6Y29tLmFkb2JlLnhtcAAAAAAAPD94cGFja2V0IGJlZ2luPSLvu78iIGlkPSJXNU0wTXBDZWhpSHpyZVN6TlRjemtjOWQiPz4gPHg6eG1wbWV0YSB4bWxuczp4PSJhZG9iZTpuczptZXRhLyIgeDp4bXB0az0iQWRvYmUgWE1QIENvcmUgNi4wLWMwMDUgNzkuMTY0NTkwLCAyMDIwLzEyLzA5LTExOjU3OjQ0ICAgICAgICAiPiA8cmRmOlJERiB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiPiA8cmRmOkRlc2NyaXB0aW9uIHJkZjphYm91dD0iIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtbG5zOmRjPSJodHRwOi8vcHVybC5vcmcvZGMvZWxlbWVudHMvMS4xLyIgeG1sbnM6cGhvdG9zaG9wPSJodHRwOi8vbnMuYWRvYmUuY29tL3Bob3Rvc2hvcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RFdnQ9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZUV2ZW50IyIgeG1wOkNyZWF0b3JUb29sPSJBZG9iZSBQaG90b3Nob3AgMjIuMSAoV2luZG93cykiIHhtcDpDcmVhdGVEYXRlPSIyMDIzLTExLTI1VDE0OjA2OjE4KzAxOjAwIiB4bXA6TW9kaWZ5RGF0ZT0iMjAyMy0xMS0yNVQxNDoxMjowMSswMTowMCIgeG1wOk1ldGFkYXRhRGF0ZT0iMjAyMy0xMS0yNVQxNDoxMjowMSswMTowMCIgZGM6Zm9ybWF0PSJpbWFnZS9wbmciIHBob3Rvc2hvcDpDb2xvck1vZGU9IjMiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6ZjNjM2I2MDYtMmZkMS03NDRiLThkZDktMDE5ZGNhMmFhZWNhIiB4bXBNTTpEb2N1bWVudElEPSJhZG9iZTpkb2NpZDpwaG90b3Nob3A6NGUwMTVjOTgtM2M3My0wMDQ4LTg1OGQtOTgwN2ZiYTFhYWQwIiB4bXBNTTpPcmlnaW5hbERvY3VtZW50SUQ9InhtcC5kaWQ6ZTI3MGQzODgtNTYzNS01ODRhLWI4NWEtZGE2YWZjOWVjYzlmIj4gPHhtcE1NOkhpc3Rvcnk+IDxyZGY6U2VxPiA8cmRmOmxpIHN0RXZ0OmFjdGlvbj0iY3JlYXRlZCIgc3RFdnQ6aW5zdGFuY2VJRD0ieG1wLmlpZDplMjcwZDM4OC01NjM1LTU4NGEtYjg1YS1kYTZhZmM5ZWNjOWYiIHN0RXZ0OndoZW49IjIwMjMtMTEtMjVUMTQ6MDY6MTgrMDE6MDAiIHN0RXZ0OnNvZnR3YXJlQWdlbnQ9IkFkb2JlIFBob3Rvc2hvcCAyMi4xIChXaW5kb3dzKSIvPiA8cmRmOmxpIHN0RXZ0OmFjdGlvbj0iY29udmVydGVkIiBzdEV2dDpwYXJhbWV0ZXJzPSJmcm9tIGFwcGxpY2F0aW9uL3ZuZC5hZG9iZS5waG90b3Nob3AgdG8gaW1hZ2UvcG5nIi8+IDxyZGY6bGkgc3RFdnQ6YWN0aW9uPSJzYXZlZCIgc3RFdnQ6aW5zdGFuY2VJRD0ieG1wLmlpZDpmM2MzYjYwNi0yZmQxLTc0NGItOGRkOS0wMTlkY2EyYWFlY2EiIHN0RXZ0OndoZW49IjIwMjMtMTEtMjVUMTQ6MTI6MDErMDE6MDAiIHN0RXZ0OnNvZnR3YXJlQWdlbnQ9IkFkb2JlIFBob3Rvc2hvcCAyMi4xIChXaW5kb3dzKSIgc3RFdnQ6Y2hhbmdlZD0iLyIvPiA8L3JkZjpTZXE+IDwveG1wTU06SGlzdG9yeT4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz7muXD8AAADEElEQVRoge2aTUhUURiGH9MWRSVDFEWLAS0KIpJwU9QiiYIoCIoosFoEpUGL2riYFkG5aSNBhG0kaqlGm2wRhAQttFxUqwwi+kEQqYQgIXBaXA9ef2bmnu+e75xxxgfehePMN+/73iv3zjfWoEs90AocBHYDeeAD8Bp4AnxRfv+gtAETRKEX0zRwH8iEMqhJD4WDz9c4cCSMTR16SR4+rkshzLpGGt6ozb9ld/SRLrzRFZ+maxzN6QNOWjz/O/CC6IowMeNjI7CH6IpxBnhFVEjZY3Pk/wDtQF2RefXATtwdHFVswn8CsmFs6mAbvj6MTR2WwyfUKFUefl0Ymzr0sxxeFP4h0OLRa2p2AB2xn23Cf2Ru+IGZx/8BzdrGXZABxohM54C72IVfG5s1MO/308B+HyGkZIDPyO7fS4WP65B+FHt8hTc6rh3Ihm24Cb8BeG7x2tPqyRIygpsjf0sw44JqsoTsA35iZ/w9c8MDbGb2I6yN2tWSWdBA8hImSswaTjgnrutO0whJWsIU0A2sKjCnjugMsS0hp5DJmgbgF6XN/mDhn0Cc1USfAm1L6HQdSEIjxUsYpvhGx5ABvhWZU0hd7qLIKVTCG2CFxZxNRHt/2xK6XYRISyPwm1lTI0CtYE4WmMS+hEep3DtiK5GZMZKd9oXYDvzFvoTeFO/pjF3AFgdzmrAvIA88c/DeZcNRZCWUxZngilZkJfSHMKvFZWQlDIQwq8U1ZCUMBvCqRg5ZCUPAygB+VehEVsI7YE0Avyp0ISthFFgfwK8KD5CV8BU39yllwWNkJYwT3bpXBDbfQ8Q1SfR/BRWBzXI1rimWyBcwSRhEVsI0cMC/XR2GkJWQBw4H8OucWmT7RaMT3h0rIN0vGp31b9k90v2i0UX/lt0j3S8aXfVv2T1ZZPtFo46FI5ce0v2i0U3vjhVoIrreS0u4492xAnuRF5AH7vm37J4W0pXw1OZbnnLkJXAsxevfujISmlPYH/1zQZwqcp4qDm9oo4rDG4qt2ys+vGGxdXvVhDfcporDG3qAG8We8B/NomYIaoY7twAAAABJRU5ErkJggg==);Powyższa deklaracja CSS ustawia w tle na środku elementu ikonę młotka w formacie PNG, zakodowaną w formacie Base64:
Ścieżka SVG w funkcji url()
Poniższy kod wstawia w tle elementu czarny trójkąt w formacie SVG.
background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='210' width='400'%3E %3Cpath d='M20 20 L45 100 L125 100 Z' /%3E%3C/svg%3E");Efekt:
Zastosowanie
Funkcja CSS url() może być wartością każdej własności CSS, która przyjmuje adres jakiegoś zasobu, np. arkusza stylów, obrazu graficznego lub fontu. Niektóre własności i inne elementy CSS, których wartością może być funkcja url(): @counter-style, background, background-image, border, border-image, border-image-source, clip-path, content, cursor, filter, list-style, list-style-image, mask, mask-image, offset-path, src w bloku @font-face.