Nine keyword positions: bg-center, bg-top, bg-left-bottom… This family contains 9 generated classes in Nakshora 3.1.
Classes#
| Class | Generated CSS |
|---|---|
bg-bottom | background-position: bottom; |
bg-center | background-position: center; |
bg-left | background-position: left; |
bg-left-bottom | background-position: left bottom; |
bg-left-top | background-position: left top; |
bg-right | background-position: right; |
bg-right-bottom | background-position: right bottom; |
bg-right-top | background-position: right top; |
bg-top | background-position: top; |
Example#
example
<div class="bg-no-repeat bg-center bg-cover">…</div>Responsive & variants#
Every class here accepts screen prefixes (xxs: … 5xl:) and state variants — md:hover:p-4 style stacks compile to a single media query. See responsive/index|Responsive design and variants/index|Variants.
Best practices#
- Arbitrary positions: bg-[center_20%]
Related#
utilities/backgrounds/gradients|Gradients · colors/index|Colors