Background Size

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.

Examples

.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.

Previous

Hovers

Next

Borders

tachyons-background-size

v5.0.5 136 B
Declarations
8
Selectors
8
Max. Specificity Score
10
Size of Avg. Rule
1
Source Code
src/_background-size.css

/*

   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; }
}