All background utility classes have background-repeat: no-repeat
.
Group of Classes | CSS |
---|---|
.img-background |
background-size: cover; background-position: 50% 50%; |
.img-background-100 |
background-size: 100%; background-position: top left; |
.img-background-top |
background-position: top center; |
Group of Classes | CSS |
---|---|
.img-full-width |
width: 100%; height: auto; |
.img-full-size |
width: 100%; height: 100%; |
An element with position: absolute;
will position itself within the context of it's closest position: relative;
parent.
Group of Classes | CSS |
---|---|
.center |
display: inline-block; left: 50%; position: absolute; top: 50%; transform: translate(-50%, -50%); vertical-align: middle; |
.absolute-cover |
position: absolute; top: 0; bottom: 0; left: 0; right: 0; |
Class | CSS |
---|---|
.img-border |
border-color: rgba($cr-gray-lighter, .4); border-style: solid; border-width: 2px; |
To make an image circular, use the class .img-circle
which is provided by Bootstrap here.