The New CSS Image Function

Digging in the w3c specs can reveal many exciting features. Although some of them don’t have browser support yet, we can at least learn what new features we can expect soon.

Cropping Images

The first thing that the image function enables us to do is to load only part of an image. This means that you can crop and load a part of an image via CSS.
To do that, the image function takes an image URL and 4 other parameters: start X position, start Y position, width, and height.

background-image: image('myimage.webp#xywh=338,324,360,390');

The Image Types Method

The second thing that the image function enables us to do is to load different types of images depending on browser support. For example: .webp image files work in Edge/Firefox/Chrome, but don't work in Safari.

.help::before {
content: image("try.avif", "try.webp", "try.jpg");
}

Final Words

That’s all.
I hope you’ve enjoyed this article.
If you like this post, I would appreciate applause and sharing :-)

(Me talking at ConFrontJS 2019, Warsaw, Poland)

CSS & HTML Expert