#CSSExplainer: image() function, explained

#css #webdev #tutorial #productivity

The CSS image() function is similar to the url() function, but with extra features that let us specify an image with fallback options and annotations.

Key features:

Uses media fragments to clip out a portion
Specifies fallback images
Uses a solid color as an image
Specifies the directionality of image, ltr for left to right or rtl for right to left

/* Syntax of image() function */

/*
image(<image-tags> [ <image-src> , <color> ] )

<image-tags> = ltr | rtl
 ltr - ltr for left-to-right & rtl - right-to-left. 

<image-src> = <url> | <string>
<color> = <rgb()> | <rgba()> | <hsl()> | <hsla()> | <hex-color> | <named-color>
*/


/* Example-1: Cropping portion of an image*/
.logo {
   background-image: image('myimage.webp#xywh=338,324,360,390');
}

/* Example-2: Putting color on top of a background image */
.logo {
  background-image:
    image(rgba(0, 0, 0, 0.25)),
    url("https://mdn.mozillademos.org/files/12053/firefox.png");
  background-size: 25%;
  background-repeat: no-repeat;
}