Perfect Filling

What to do if image is smaller or larger than the block? The background-size property helps.

1. Two Main Values:

cover: Image stretches to completely cover the entire block. Edges may be cropped, but no empty spaces.
contain: Image fits entirely. It won't be cropped, but empty stripes may appear at edges.

2. Exact Sizes

You can specify background-size: 50% auto; (width 50%, height adjusts automatically).

Tip

Combination of background-size: cover and background-position: center is the base for creating beautiful full-screen banners. This guarantees the important part of photo stays in center.

Note

The object-fit property does the same as background-size, but for regular <img> tags. Don't confuse them!