Tachyons

Docs

/

Themes

/

Background Size

Version
2.1.0
Filesize
134 B
Declarations
8
Selectors
8
Max. Specificity Score
10
Size of Avg. Rule
1

Background-size affects how images fill their containing elements. While units can be declared explicitly to size an image, the ones that seem most reusable are setting contain or cover.

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.

Previous

Hovers

Next

Borders
src/_background-size.css

/*

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


Docs

General

Debugging Images