Background-size affects how background images fill their containing elements.
While measurements can be declared explicitly to size an image, the values
that seem most reusable are contain and cover.
.contain { background-size: contain }
contain will make sure that the entire image is displayed within the element, regardless of the elements dimensions.
.cover { background-size: cover }
cover will make sure the entire element is covered - but won’t guarantee that the entire image will be shown.
/*
BACKGROUND SIZE
Docs: http://tachyons.io/docs/themes/background-size/
Media Query Extensions:
-ns = not-small
-m = medium
-l = large
*/
/*
Often used in combination with background image set as an inline style
on an html element.
*/
.cover { background-size: cover!important; }
.contain { background-size: contain!important; }
@media (--breakpoint-not-small) {
.cover-ns { background-size: cover!important; }
.contain-ns { background-size: contain!important; }
}
@media (--breakpoint-medium) {
.cover-m { background-size: cover!important; }
.contain-m { background-size: contain!important; }
}
@media (--breakpoint-large) {
.cover-l { background-size: cover!important; }
.contain-l { background-size: contain!important; }
}