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:url(/hero.jpg) bg-cover">    ...</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-cover@sm bg-auto@print">...</div>

Pair size with background-position to control the crop.