Skip to main content


Atomic classes for controlling the background properties of an element’s background image.

Class Output
.bg-auto background-size: auto;
.bg-cover background-size: cover;
.bg-contain background-size: contain;
Class Output
.bg-repeat background-repeat: repeat;
.bg-no-repeat background-repeat: no-repeat;
.bg-repeat-x background-repeat: repeat-x;
.bg-repeat-y background-repeat: repeat-y;
Class Output
.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;
<div class="bg-no-repeat bg-bottom"></div>
<div class="bg-no-repeat bg-center"></div>
<div class="bg-no-repeat bg-left"></div>
<div class="bg-no-repeat bg-left-bottom"></div>
<div class="bg-no-repeat bg-left-top"></div>
<div class="bg-no-repeat bg-right"></div>
<div class="bg-no-repeat bg-right-bottom"></div>
<div class="bg-no-repeat bg-right-top"></div>
<div class="bg-no-repeat bg-top"></div>
Class Output
.bg-fixed background-attachment: fixed;
.bg-local background-attachment: local;
.bg-scroll background-attachment: scroll;
Class Output
.bg-image-none background-image: none;

Adding the confetti background utility adds confetti to any block-level element. You can choose the animated version, or static version. The animated version respects prefers-reduced-motion and displays the static version of the background when necessary. No JavaScript required.

<div class="bg-confetti-animated"></div>
<div class="bg-confetti-static"></div>
Deploys by Netlify