CSS images

{{CSSRef}} 

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("image-resolution")}} 
• {{CSSxRef("object-fit")}} 
• {{CSSxRef("object-position")}} 

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

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.

• 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.

Specifications

{{Specifications}} 

See also

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