bg-cover, bg-contain, bg-auto — how images scale inside the box. This family contains 3 generated classes in Nakshora 3.0.
Classes#
| Class | Generated CSS |
|---|---|
bg-auto | background-size: auto; |
bg-cover | background-size: cover; |
bg-contain | background-size: contain; |
Example#
example
<div class="bg-cover bg-center" style="background-image:url(hero.jpg)"></div>Responsive & variants#
Every class here accepts screen prefixes (sm: … xl:) 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#
- bg-cover + bg-center is the hero standard
- For <img>, use utilities/layout/object-fit|object-fit instead
Related#
utilities/backgrounds/gradients|Gradients · colors/index|Colors