Background Size

Background Size utilities

Background size utilities are often used in combination with a background image set as an inline style on an html element.

Available Classes

Class Name	Responsive Class	Description
`u-bgCover`	none	Will make sure the entire element is covered - but won't guarantee that the entire image will be shown.
`u-bgContain`	none	Will make sure that the entire image is displayed within the element, regardless of the elements dimensions.

Background Cover

<div class="u-bgCover  u-bgGray" style="background-image: url('http://www.placecage.com/c/1920/1080'); background-repeat: no-repeat; background-position: center;">
  <div class="o-ratio  o-ratio--16x9">
    &nbsp;
  </div>
</div>

Background Contain

Notice the gaps at the top and bottom of the container.

<div class="u-bgContain  u-bgPrimary" style="background-image: url('http://www.placecage.com/c/800/450'); background-repeat: no-repeat; background-position: center;">
  <div class="o-ratio  o-ratio--16x9">
    &nbsp;
  </div>
</div>