Background Size

import { ApiTable } from "@/components/api-table.tsx"; import { Example } from "@/components/example.tsx"; import { Figure } from "@/components/figure.tsx"; import { ResponsiveDesign, UsingACustomValue } from "@/components/content.tsx"; import { Stripes } from "@/components/stripes.tsx";

export const title = "background-size"; export const description = "Utilities for controlling the background size of an element's background image.";

<ApiTable rows={[ ["bg-auto", "background-size: auto;"], ["bg-cover", "background-size: cover;"], ["bg-contain", "background-size: contain;"], ["bg-size-(<custom-property>)", "background-size: var(<custom-property>);"], ["bg-size-[<value>]", "background-size: <value>;"], ]} />

Examples

Filling the container

Use the bg-cover utility to scale the background image until it fills the background layer, cropping the image if needed:

<Figure> <Example> { <div className="relative mx-auto flex w-56 items-center justify-center overflow-hidden rounded-lg sm:w-96"> <div className="absolute inset-0"> <Stripes border className="h-full rounded-lg" /> </div> <div className="relative z-10 h-48 w-full bg-[url(https://images.unsplash.com/photo-1554629947-334ff61d85dc?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=512&h=640&q=80)] bg-cover bg-center bg-no-repeat"></div> </div> } </Example> </Figure>

Filling without cropping

Use the bg-contain utility to scale the background image to the outer edges without cropping or stretching:

<Figure> <Example> { <div className="relative mx-auto flex w-56 items-center justify-center overflow-hidden rounded-lg sm:w-96"> <div className="absolute inset-0"> <Stripes border className="h-full rounded-lg" /> </div> <div className="relative z-10 h-48 w-full bg-[url(https://images.unsplash.com/photo-1554629947-334ff61d85dc?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=512&h=640&q=80)] bg-contain bg-center bg-no-repeat sm:bg-top"></div> </div> } </Example> </Figure>

Using the default size

Use the bg-auto utility to display the background image at its default size:

<Figure> <Example> { <div className="relative mx-auto flex h-48 w-56 items-center justify-center overflow-hidden rounded-lg sm:w-96"> <div className="absolute inset-0"> <Stripes border className="h-full rounded-lg" /> </div> <div className="relative z-10 h-full w-full bg-[url(https://images.unsplash.com/photo-1554629947-334ff61d85dc?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=128&h=160&q=80)] bg-auto bg-center bg-no-repeat"></div> </div> } </Example> </Figure>

Using a custom value

<UsingACustomValue utility="bg-size" value="auto_100px" name="background size" variable="image-size" />

Responsive design

<ResponsiveDesign property="background-size" defaultClass="bg-auto" featuredClass="bg-contain" />