The image() function allows an author to:

  • use media fragments to clip out a portion of an image
  • specify fallback images in case the preferred image can't be decoded or is a type that the browser doesn't recognize
  • use a solid color as an image
  • automatically respect the image orientation specified in the image's metadata
]]> A linear gradient is created by specifying a gradient line and then several colors placed along that line. The image is constructed by creating an infinite canvas and painting it with lines perpendicular to the gradient line, with the color of the painted line being the color of the gradient line where the two intersect. This produces a smooth fade from each color to the next, progressing in the specified direction.

The first argument to the function specifies the gradient line, which gives the gradient a direction and determines how color-stops are positioned. It may be omitted; if so, it defaults to ‘to bottom’.

The gradient line's direction may be specified in two ways:

using angles
For the purpose of this argument, ‘0deg’ points upward, and positive angles represent clockwise rotation, so ‘90deg’ point toward the right.
using keywords

If the argument is ‘to top’, ‘to right’, ‘to bottom’, or ‘to left’, the angle of the gradient line is ‘0deg’, ‘90deg’, ‘180deg’, or ‘270deg’, respectively.

If the argument instead specifies a corner of the box such as ‘to top left’, the gradient line must be angled such that it points into the same quadrant as the specified corner, and is perpendicular to a line intersectingd the two neighboring corners of the gradient box. This causes a color-stop at 50% to intersect the two neighboring corners.

Starting from the center of the gradient box, extend a line at the specified angle in both directions. The ending point is the point on the gradient line where a line drawn perpendicular to the gradient line would intersect the corner of the gradient box in the specified direction. The starting point is determined identically, but in the opposite direction.

]]> In a radial gradient, rather than colors smoothly fading from one side of the gradient box to the other as with linear gradients, they instead emerge from a single point and smoothly spread outward in a circular or elliptical shape.

A radial gradient is specified by indicating the center of the gradient (where the 0% ellipse will be) and the size and shape of the ending shape (the 100% ellipse). Color stops are given as a list, just as for ‘linear-gradient()’. Starting from the center and progressing towards (and potentially beyond) the ending shape uniformly-scaled concentric ellipses are drawn and colored according to the specified color stops.

]]> In addition to <linear-gradient> and <radial-gradient>, the specification defines <repeating-linear-gradient> and <repeating-radial-gradient> values. These two notations take the same values and are interpreted the same as their respective non-repeating siblings defined previously.

When rendered, however, the color-stops are repeated infinitely in both directions, with their positions shifted by multiples of the difference between the last specified color-stop's position and the first specified color-stop's position. For example, ‘repeating-linear-gradient(red 10px, blue 50px)’ is equivalent to ‘linear-gradient(..., red -30px, blue 10px, red 10px, blue 50px, red 50px, blue 90px, ...)’. Note that the last color-stop and first color-stop will always coincide at the boundaries of each group, which will produce sharp transitions if the gradient does not start and end with the same color.

]]> In addition to <linear-gradient> and <radial-gradient>, the specification defines <repeating-linear-gradient> and <repeating-radial-gradient> values. These two notations take the same values and are interpreted the same as their respective non-repeating siblings defined previously.

When rendered, however, the color-stops are repeated infinitely in both directions, with their positions shifted by multiples of the difference between the last specified color-stop's position and the first specified color-stop's position. For example, ‘repeating-linear-gradient(red 10px, blue 50px)’ is equivalent to ‘linear-gradient(..., red -30px, blue 10px, red 10px, blue 50px, red 50px, blue 90px, ...)’. Note that the last color-stop and first color-stop will always coincide at the boundaries of each group, which will produce sharp transitions if the gradient does not start and end with the same color.

]]> The ‘object-fit’ property specifies how the contents of a replaced element should be fitted to the box established by its used height and width.

‘fill’
The replaced content is sized to fill the element's content box: the object's concrete object size is the element's used width and height.
‘contain’
The replaced content is sized to maintain its aspect ratio while fitting within the element's content box: its concrete object size is resolved as a contain constraint against the element's used width and height.
‘cover’
The replaced content is sized to maintain its aspect ratio while filling the element's entire content box: its concrete object size is resolved as a cover constraint against the element's used width and height.
‘none’
The replaced content is not resized to fit inside the element's content box: determine the object's concrete object size using the default sizing algorithm with no specified size, and a default object size equal to the replaced element's used width and height.
‘scale-down’

Size the content as if ‘none’ or ‘contain’ were specified, whichever would result in a smaller concrete object size.

Note that both ‘none’ and ‘contain’ respect the content's intrinsic aspect ratio, so the concept of "smaller" is well-defined.

]]> The ‘image-resolution’ property specifies the intrinsic resolution of all raster images used in or on the element. It affects both content images (e.g. replaced elements and generated content) and decorative images (such as ‘background-image’). The intrinsic resolution of an image is used to determine the image's intrinsic dimensions. Values have the following meanings:

‘<resolution>’
Specifies the intrinsic resolution explicitly. A "dot" in this case corresponds to a single image pixel.
‘from-image’
The image's intrinsic resolution is taken as that specified by the image format. If the image does not specify its own resolution, the explicitly specified resolution is used (if given), else it defaults to ‘1dppx’.
‘snap’
If the "snap" keyword is provided, the computed ‘<resolution>’ (if any) is the specified resolution rounded to the nearest value that would map one image pixel to an integer number of device pixels. If the resolution is taken from the image, then the used intrinsic resolution is the image's native resolution similarly adjusted.
]]> This property specifies an orthogonal rotation to be applied to an image before it is laid out. It applies only to content images (e.g. replaced elements and generated content), not decorative images (such as ‘background-image’). CSS layout processing applies to the image after rotation. This implies, for example:

  • aThe intrinsic height and width are derived from the rotated rather than the original image dimensions.
  • aThe height (width) property applies to the vertical (horizontal) dimension of the image, after rotation.
]]>