Backgrounds

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

Background size

Background size classes

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

Background repeat

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

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

<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

Background attachment classes

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