One key difference between
image() is the ability to add a media fragment identifier — a starting point along the x and y axis, along with a width and height — onto the image source to display only a section of the source image. The section of the image defined in the parameter becomes a standalone image. The syntax looks like so:
The background image of the element will be the portion of the image myImage.webp that starts at the coordinate 0px, 20px (the top left-hand corner) and is 40px wide and 60px tall.
#xywh=#,#,#,# media fragment syntax takes four comma separated numeric values. The first two represent the X and Y coordinates for the starting point of the box that will be created. The third value is the width of the box, and the last value is the height. By default, these are pixel values. The spacial dimension definition in the media specification indicates that percentages will be supported as well:
The image fragments can be used in
url() notation as well. The
#xywh=#,#,#,# media fragment syntax is 'backwards compatible' in that a media fragment will be ignored if not understood, and won't break the source call when used with
url(). If the browser doesn't understand the media fragments notation, it ignores the fragment, displaying the entire image.
Browsers that understand
image() also understand the fragment notation. Therefore, if the fragment is not understood within
image(), the image will be considered invalid.