Images, Gradients, and Replaced-Content Sizing

Basic

CSS Images defines image values, how CSS refers to external or generated images, and how images participate in sizing and rendering. This lesson focuses on the image model and on replaced-content sizing; Backgrounds and Borders owns how an image is painted as a background, while Color owns color values used inside gradients.

An image can be a CSS value, not only a file

CSS uses the <image> value type for things such as a URL-referenced image and generated gradients. The important boundary is that the image value describes the image resource or generated image; a property such as background-image or object-fit determines how that image is used by a particular rendering context.

?

Images can have intrinsic dimensions

An image can carry intrinsic width, intrinsic height, and an intrinsic aspect ratio. These are not the same thing as the CSS width and height you author. When a replaced element is allowed to use its natural size, those intrinsic characteristics provide information that the sizing rules can use.

?

Replaced elements use intrinsic content when their CSS size is automatic

Replaced elements such as images have rendering behavior that differs from ordinary boxes because their rendered content comes from an external or generated resource. If width or height is automatic, the sizing system can use intrinsic dimensions and aspect ratio. Setting both dimensions explicitly can override the natural size.

<main><div class="cards"><figure><img src="data:image/svg+xml;charset=utf-8,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 ?=%22240%22 height=%22120%22 viewBox=%220 0 240 120%22%3E%3Crect width=%22240%22 height=%22120%22 fill=%22%23264653%22/%3E%3Ccircle cx=%22120%22 cy=%2260%22 r=%2240%22 fill=%22%23e9c46a%22/%3E%3C/svg%3E" alt="Landscape illustration"><figcaption>Natural size</figcaption></figure><figure><img class="fixed" src="data:image/svg+xml;charset=utf-8,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%22240%22 height=%22120%22 viewBox=%220 0 240 120%22%3E%3Crect width=%22240%22 height=%22120%22 fill=%22%23264653%22/%3E%3Ccircle cx=%22120%22 cy=%2260%22 r=%2240%22 fill=%22%23e9c46a%22/%3E%3C/svg%3E" alt="Landscape illustration"><figcaption>Explicit 140×70</figcaption></figure></div></main>

Aspect ratio can preserve the image shape while CSS changes its size

For an image whose intrinsic aspect ratio is available, changing one dimension can allow the other dimension to remain consistent with that ratio. CSS also provides the `aspect-ratio` property for boxes when an explicit or preferred ratio is needed. The general sizing algorithm remains owned by CSS Sizing; this lesson concentrates on how image content supplies and uses aspect-ratio information.

body { margin: 0; padding: 2rem; font: 1rem system-ui; }
.stage { width: min(28rem, 100%); }
.stage img { display: block; width: 100%; ?; border: 2px solid #555; }

object-fit controls how replaced content fits its content box

`object-fit` does not resize the CSS box itself. It controls how the replaced content is fitted inside that box when the content and box have different proportions. `contain` preserves the whole image and may leave empty space; `cover` fills the box and may crop part of the image.

<main><div class="grid"><figure><img class="contain" src="data:image/svg+xml;charset=utf-8,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%22240%22 height=%22120%22 viewBox=%220 0 240 120%22%3E%3Crect width=%22240%22 height=%22120%22 fill=%22%23264653%22/%3E%3Ccircle cx=%22120%22 cy=%2260%22 r=%2240%22 fill=%22%23e9c46a%22/%3E%3C/svg%3E" alt="Landscape illustration"><figcaption>contain</figcaption></figure><figure><img class="?" src="data:image/svg+xml;charset=utf-8,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%22240%22 height=%22120%22 viewBox=%220 0 240 120%22%3E%3Crect width=%22240%22 height=%22120%22 fill=%22%23264653%22/%3E%3Ccircle cx=%22120%22 cy=%2260%22 r=%2240%22 fill=%22%23e9c46a%22/%3E%3C/svg%3E" alt="Landscape illustration"><figcaption>cover</figcaption></figure></div></main>

object-position chooses which part of fitted content is visible

When `object-fit` leaves a choice about where the replaced content sits inside its content box, `object-position` controls that alignment. It is especially useful with `cover`, where cropping is expected and you want a particular subject to remain visible.

body { margin: 0; padding: 2rem; font: 1rem system-ui; }
.grid { display: flex; gap: 1rem; flex-wrap: wrap; }
figure { margin: 0; }
img { display: block; width: 140px; height: 140px; border: 2px solid #555; object-fit: cover; }
.left { ?: left center; }
.right { object-position: right center; }

image-set() can describe resolution-dependent image choices

CSS Images provides `image-set()` as a way to describe alternative image resources for different pixel densities or supported formats. The user agent can choose an appropriate candidate. This is an image-value mechanism, not a media-query lesson.

?

Gradients generate images from color stops

CSS Images defines linear, radial, conic, and repeating gradient notations as generated `<image>` values. A gradient has no source file: the user agent generates the image from the function arguments. The color values and their interpolation spaces belong to the Color owner; the gradient geometry and stop structure belong here.

?

Color stops define where gradient colors change

Gradient functions take color stops, and stop positions control where those colors occur along the gradient’s progression. Stops can be adjacent to create abrupt transitions. The exact color interpolation is a Color specification concern; this lesson owns how stops define the generated image’s geometry and progression.

?

Repeating gradients extend a gradient pattern

The repeating linear, radial, and conic gradient functions repeat their respective gradient pattern beyond the defined interval. This is still a generated image value; using that image as a background is the Backgrounds/Borders owner’s job.

?

Developing image notations extend the image value model

CSS Images Level 4 also defines additional image notations such as `image()` and `element()`, alongside `cross-fade()`. These are more advanced/developing parts of the module. They belong to the image-value owner, but they should not displace the stable URL, gradient, intrinsic-sizing, and object-fitting fundamentals.

?

Gradients are image values, but their background painting belongs elsewhere

Linear, radial, and conic gradients are generated image values. The dedicated Images owner explains how these image values are constructed. Backgrounds and Borders owns the separate question of how an image value is placed, repeated, sized, clipped, and painted as a background. This separation prevents the same gradient material from being taught twice.

?

Image rendering can affect how sampled pixels are presented

`image-rendering` gives authors a way to request a particular image-rendering approach when an image is scaled. It does not change the source image or its intrinsic dimensions. Keep this separate from `object-fit`, which controls fitting, and from Sizing, which controls the dimensions of the box.

body { margin: 0; padding: 2rem; font: 1rem system-ui; }
.diagnose { display: block; width: 16rem; height: 10rem; ?: cover; object-position: 50% 50%; border: 2px solid #555; }

Image resolution can influence intrinsic image size

The current CSS Images Level 4 draft also defines `image-resolution`, which controls the preferred resolution used to determine the natural dimensions of raster images. It can use an explicit `<resolution>`, `from-image`, and the developing `snap` option. This belongs to the image-value and intrinsic-size owner; it is separate from `image-rendering`, which concerns how sampled pixels are presented.

?

A practical image-sizing diagnosis

When an image looks unexpectedly cropped, stretched, or letterboxed, separate three questions: what is the source image’s intrinsic information, what size did CSS give the replaced-element box, and how is the content fitted inside that box? Check intrinsic dimensions and aspect ratio first, then authored width/height, then `object-fit` and `object-position`. Do not start by changing unrelated layout properties.

?

What this lesson deliberately does not own

This lesson does not own generic sizing algorithms, padding or margin, background painting, color-space definitions, HTML image semantics, DOM APIs, responsive media queries, or future Web Platform image APIs. CSS Sizing remains the owner of general size resolution; Backgrounds/Borders owns background and border painting; Color owns color values and spaces; HTML owns image semantics; Web Platform specifications own DOM/CSSOM APIs.

Specification status and practical scope

CSS Images Level 3 remains the established foundation, while the current CSS Images Level 4 Editor’s Draft is dated 18 September 2026. Developing Level 4 material such as newer image notations and `image-resolution` is included only where it clarifies the current image-value model; it must not be presented as a universal implementation guarantee.

Quick review

Remember the ownership chain: the image resource or generated image supplies image information; CSS Sizing resolves the box size; `object-fit` and `object-position` control how replaced content is fitted and aligned inside that box; image resolution affects natural image dimensions; Backgrounds/Borders controls background painting when the same image value is used as a background.