Backgrounds - Stack Overflow Design System

Background size

Background size classes

Class	Output
`.bg-auto`	background-size: auto;
`.bg-cover`	background-size: cover;
`.bg-contain`	background-size: contain;

Background repeat

Section titled Background repeat

Background repeat classes

Section titled Background repeat classes

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;

Background position

Section titled Background position

Background position classes

Section titled Background position classes

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;

Background position examples

Section titled Background position examples

<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>

.bg-bottom

.bg-center

.bg-left

.bg-left-bottom

.bg-left-top

.bg-right

.bg-right-bottom

.bg-right-top

.bg-top

Background attachment

Section titled Background attachment

Background attachment classes

Section titled Background attachment classes

Class	Output
`.bg-fixed`	background-attachment: fixed;
`.bg-local`	background-attachment: local;
`.bg-scroll`	background-attachment: scroll;

Background image

Section titled Background image

Background image classes

Section titled Background image classes

Class	Output
`.bg-image-none`	background-image: none;

Background utilities

Section titled Background utilities

Loading

Section titled Loading

The Loading utility applies a shimmering gradient animation to a container's background. Use this class to create flexible 'skeleton' placeholders that mimic the shape and layout of content while it loads.

<div class="p16">
    <div class="ws3 d-flex g16">
        <div class="v-visible-sr">Loading…</div>
        <div class="bg-loading s-avatar s-avatar__96 fl-shrink0"></div>
        <div class="d-flex fd-column g8 jc-space-between w100">
            <div class="bg-loading bar-md h24"></div>
            <div class="bg-loading bar-md h24"></div>
            <div class="bg-loading bar-md h24 w70"></div>
        </div>
    </div>
</div>

Loading…

Confetti

Section titled Confetti

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>

Animated

Static