background-size.mdx

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-()", "background-size: var();"], ["bg-size-[]", "background-size: ;"], ]} />

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:

{

}

<!-- [!code classes:bg-cover] -->
<div class="bg-[url(/img/mountains.jpg)] bg-cover bg-center"></div>

Filling without cropping

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

{

}

<!-- [!code classes:bg-contain] -->
<div class="bg-[url(/img/mountains.jpg)] bg-contain bg-center"></div>

Using the default size

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

{

}

<!-- [!code classes:bg-auto] -->
<div class="bg-[url(/img/mountains.jpg)] bg-auto bg-center bg-no-repeat"></div>

Using a custom value

Responsive design