Background Origin

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

export const title = "background-origin"; export const description = "Utilities for controlling how an element's background is positioned relative to borders, padding, and content.";

<ApiTable rows={[ ["bg-origin-border", "background-origin: border-box;"], ["bg-origin-padding", "background-origin: padding-box;"], ["bg-origin-content", "background-origin: content-box;"], ]} />

Examples

Basic example

Use the bg-origin-border, bg-origin-padding, and bg-origin-content utilities to control where an element's background is rendered:

<Figure> <Example padding={false}> { <div className="flex scroll-p-8 overflow-scroll sm:block sm:overflow-visible"> <div className="flex shrink-0 items-center justify-around gap-12 p-8 font-mono font-bold sm:gap-4"> <div className="flex shrink-0 flex-col items-center"> <p className="mb-3 text-center font-mono text-xs font-medium text-gray-500 dark:text-gray-400"> bg-origin-border </p> <div className="h-24 w-24 rounded-lg border-4 border-dashed border-white/75 bg-gray-300 bg-[url(https://images.unsplash.com/photo-1554629947-334ff61d85dc?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1000&h=1000&q=90)] bg-cover bg-no-repeat bg-origin-border object-cover p-3 dark:border-white/40"></div> </div> <div className="flex shrink-0 flex-col items-center"> <p className="mb-3 text-center font-mono text-xs font-medium text-gray-500 dark:text-gray-400"> bg-origin-padding </p> <div className="h-24 w-24 rounded-lg border-4 border-dashed border-white/75 bg-gray-300 bg-[url(https://images.unsplash.com/photo-1554629947-334ff61d85dc?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1000&h=1000&q=90)] bg-cover bg-no-repeat bg-origin-padding object-cover p-3 dark:border-white/25 dark:bg-gray-700"></div> </div> <div className="flex shrink-0 flex-col items-center"> <p className="mb-3 text-center font-mono text-xs font-medium text-gray-500 dark:text-gray-400"> bg-origin-content </p> <div className="h-24 w-24 rounded-lg border-4 border-dashed border-white/75 bg-gray-300 bg-[url(https://images.unsplash.com/photo-1554629947-334ff61d85dc?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1000&h=1000&q=90)] bg-cover bg-no-repeat bg-origin-content object-cover p-3 dark:border-white/25 dark:bg-gray-700"></div> </div> </div> </div> } </Example> </Figure>

Responsive design

<ResponsiveDesign property="background-origin" defaultClass="bg-origin-border" featuredClass="bg-origin-padding" />