Can a URL be Specified Without the url() Function in CSS image-set()?

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 or supported formats.


This post was published by Daniyal Hamid. Daniyal currently works as the Head of Engineering in Germany and has 20+ years of experience in software engineering, design and marketing. Please show your love and support by sharing this post.