Tachyons

Docs

/

Themes

/

Background Size

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.

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