Background

Used to set the properties of a background image

Class reference

Class
Output
.bs-auto
background-size: auto;
.bs-cover
background-size: cover;
.bs-contain
background-size: contain;
.br-repeat
background-repeat: repeat;
.br-no-repeat
background-repeat: no-repeat;
.br-repeat-x
background-repeat: repeat-x;
.br-repeat-y
background-repeat: repeat-y;
.bp-bottom
background-position: bottom;
.bp-center
background-position: center;
.bp-left
background-position: left;
.bp-left-bottom
background-position: left-bottom;
.bp-left-top
background-position: left-top;
.bp-right
background-position: right;
.bp-right-bottom
background-position: right-bottom;
.bp-right-top
background-position: right-top;
.bp-top
background-position: top;

Background size

<div className="bs-cover"></div>
<div className="bs-contain"></div>
<div className="bs-auto"></div>

Background repeat

<div className="br-repeat"></div>
<div className="br-no-repeat"></div>
<div className="br-repeat-x"></div>
<div className="br-no-repeat-y"></div>

Background position

<div className="bp-center"></div>
<div className="bp-top"></div>
<div className="bp-right-top"></div>
<div className="bp-right"></div>
<div className="bp-right-bottom"></div>
<div className="bp-bottom"></div>
<div className="bp-left-bottom"></div>
<div className="bp-left"></div>
<div className="bp-left-top"></div>
See next: Border

CONTENTS