background-size

Setting the size of the background image.

Overview

Examples

Cover a frame

Use bg-cover when the background image should fill the element and may be cropped.

<section class="bg-cover bg:url(/hero.jpg)">  ...</section>

@layer utilities {  .bg-cover {    background-size: cover  }  .bg\:url\(\/hero\.jpg\) {    background-image: url(/hero.jpg)  }}

Contain an image

Use bg-contain when the entire background image should remain visible.

<div class="bg-contain bg-no-repeat">...</div>

Use measured sizes

Use background-size:* for measured or multi-layer sizes.

<div class="background-size:12x|12x">...</div>

Apply conditionally

Apply styles based on different states using selectors and conditional queries.

<div class="bg-contain bg-auto@print bg-cover@sm">...</div>

Pair size with background-position to control the crop.