Utilities - Images | Crossroads Digital Design Kit

Background Images

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;

Image Sizing

Group of Classes CSS
.img-full-width width: 100%;
height: auto;
.img-full-size width: 100%;
height: 100%;

Image Positioning

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;

Image Border

Class CSS
.img-border border-color: rgba($cr-gray-lighter, .4);
border-style: solid;
border-width: 2px;

Circular Images

To make an image circular, use the class .img-circle which is provided by Bootstrap here.