Background

Utilities for background properties.

Background Size

Using bg-s-[*], you can control the background size of an element's background image.

bg-s-

Background Position

Using bg-p-[*], you can control the position of an element’s background image.

bg-p-
→
You can use Arbitrary values like "bg-p-(5px_10%)" as well.
Learn more about Arbitrary Styling

Background Origin

Using bg-o-[*], you can control the bounding box for an elements's background.

bg-o-

Background Clip

Using bg-clip-[*], you can control the bounding box for an elements's background.

bg-clip-

Cropping to text

By using bg-clip-text, you can crop an element’s background to match the shape of the text.

Magic 


<div class="-- bg-clip-text ** text-w-black text-250 text-c-transparent bg-gradient start-c-primary end-c-blue gd-dir-left">
    Magic
</div>

Background Repeat

Using bg-r-[*], you can control repetition of an element's background image.

bg-r-

Background Attachment

Using bg-a-[*], you can control the way a background image responds to scrolling.

bg-a-
"Arthur C. Clarke famously said that 'any sufficiently advanced technology is indistinguishable from magic,' and it's not hard to see why. Both technology and magic are about harnessing unseen forces to achieve seemingly impossible outcomes. Both rely on a certain level of understanding and skill to be effective, and both can inspire awe and wonder in those who witness their power. In many ways, technology is the modern-day equivalent of magic, allowing us to accomplish feats that would have been unimaginable just a few decades ago."

Background Image

In order to add a background URL as a utility, you can make use of bg-img-[*]. It is a convenient way to quickly set a background image without having to write additional CSS code.



<div class="-- bg-img-images/docs/landscape.jpg ** ...">
    <!-- ... -->
</div>