<?xml version="1.0" encoding="utf-8"?>

CSS background-size property

CSS background-size property Bad Practice
CSS background-size property Best Practice

With the background-size property, you can control the image and either stretch it, leave it in its natural size, or shrink it to fit the container.

The contain value scales the image to expand into the container without distorting proportions. If the container is bigger, the browser tiles the image.

In turn, the cover value stretches the image, scaling it up to fill the container. If the image's proportions don't coincide with the element's, it gets cropped either vertically or horizontally so that no blank gaps are left.

You can use length (px, pt, cm) or percentage values to set precise dimensions for an image.

Improve your UX & Product skills with interactive courses that actually work