CSS images

The CSS images module defines the types of images that can be used (the {{cssxref("image")}} type, containing URLs, gradients and other types of images), how to resize them and how they, and other replaced content, interact with the different layout models.

Reference

Properties

• {{CSSxRef("image-orientation")}}
• {{CSSxRef("image-rendering")}}
• {{CSSxRef("object-fit")}}
• {{CSSxRef("object-position")}}
• {{cssxref("object-view-box")}}

The CSS images module also defines the {{CSSxRef("image-resolution")}} property. Currently, no browsers support this feature.

Functions

• {{CSSxRef("gradient/linear-gradient", "linear-gradient()")}}
• {{CSSxRef("gradient/radial-gradient", "radial-gradient()")}}
• {{CSSxRef("gradient/repeating-linear-gradient", "repeating-linear-gradient()")}}
• {{CSSxRef("gradient/repeating-radial-gradient", "repeating-radial-gradient()")}}
• {{CSSxRef("gradient/conic-gradient", "conic-gradient()")}}
• {{CSSxRef("gradient/repeating-conic-gradient", "repeating-conic-gradient()")}}
• {{cssxref("cross-fade()")}}
• {{cssxref("element()")}}
• {{CSSxRef("image/image-set", "image-set()")}}

The CSS images module also defines the {{CSSxRef("image/image", "image()")}} function. Currently, no browsers support this feature.

Data types

• {{cssxref("gradient")}}
• {{cssxref("image")}}

Guides

• Using CSS gradients

  • : Presents a specific type of CSS images, gradients, and how to create and use these.

• Implementing image sprites in CSS

  • : Describes the common technique grouping several images in one single document to save download requests and speed up the availability of a page.

• Styling replaced elements

  • : Introduces the properties that only apply to replaced elements.

• Understanding aspect ratios

  • : Learn about the aspect-ratio property, discuss aspect ratios for replaced and non-replaced elements, and examine some common aspect ratio use cases.

• Using the CSS object-view-box property

  • : Learn the CSS object-view-box property, including how to zoom in, zoom out, and pan across images.

Related concepts

• {{cssxref("url_value", "<url>")}}
• {{cssxref("url_function", "url()")}}
• <basic-shape-rect>

Specifications

{{Specifications}}

See also

• CSS filter effects module
• CSS compositing and blending module
• CSS colors module
• CSS values and units module