Image URLs in the CSS image-set can be set without the url

As per the official W3 spec, image URLs in the CSS image-set() function can be specified without the url() function. This means that each string value inside the image-set() is automatically interpreted as a <url> value internally.

For example, the following two are equivalent:

background-image: image-set(
    "image.jpg" 1x,
    "image-2x.jpg" 2x
);

background-image: image-set(
    url("image.jpg") 1x,
    url("image-2x.jpg") 2x
);

In the first example, the image URLs are specified without the url() function, and in the second example, they are specified with the url() function. Both forms are valid and can be used with the image-set() function.

This works whether you're using image-set() to specify a set of images to be selected based on resolution


Need some help? Schedule a call together.