Examples
Contain
Contain will make sure that the entire image is displayed within the element, regardless of the elements dimensions.
Cover
Cover will make sure the entire element is covered - but won't guarantee that the entire image will be shown.
/*
BACKGROUND SIZE
Base:
bg = background-size
Modifiers:
cv = cover
cn = contain
Media Query Extensions:
-ns = not-small
-m = medium
-l = large
*/
.bg-cv { background-size: cover; }
.bg-cn { background-size: contain; }
@media (--breakpoint-not-small) {
.bg-cv-ns { background-size: cover; }
.bg-cn-ns { background-size: contain; }
}
@media (--breakpoint-medium) {
.bg-cv-m { background-size: cover; }
.bg-cn-m { background-size: contain; }
}
@media (--breakpoint-large) {
.bg-cv-l { background-size: cover; }
.bg-cn-l { background-size: contain; }
}