Skip to main content

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("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​

See also​