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", "cross-fade()")}} 
• {{CSSxRef("element", "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