background-position

Setting the initial position for background image.

Overview

Examples

Position a background image

Use bg-center, bg-top, bg-right, bg-bottom, or bg-left to set background-position.

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

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

Use explicit positions

Use background-position:* when you need two-value or measured positions.

<div class="background-position:50%|25%">...</div>

Apply conditionally

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

<div class="bg-center bg-top@sm bg-center@print">...</div>

Position changes are most visible when the image is larger than the background area or when bg-cover crops the image.