basscss-background-images

This module controls background size and position for background images.

Background Size

Use the .bg-cover or .bg-contain utilities to control background size.

<div class="p4 bg-cover white bg-gray" style="background-image: url(https://d262ilb51hltx0.cloudfront.net/max/2000/1*DZwdGMaeu-rvTroJYui6Uw.jpeg)">
  <h1>.bg-cover</h1>
</div>

Background Position

Use background position utilities to control position.

.bg-center

<div class="p4 bg-cover bg-center white bg-gray" style="background-image: url(https://d262ilb51hltx0.cloudfront.net/max/2000/1*DZwdGMaeu-rvTroJYui6Uw.jpeg)">
  <h1>.bg-center</h1>
</div>

.bg-top

<div class="p4 bg-cover bg-top white bg-gray" style="background-image: url(https://d262ilb51hltx0.cloudfront.net/max/2000/1*DZwdGMaeu-rvTroJYui6Uw.jpeg)">
  <h1>.bg-top</h1>
</div>

.bg-right

<div class="p4 bg-cover bg-right white bg-gray" style="background-image: url(https://d262ilb51hltx0.cloudfront.net/max/2000/1*DZwdGMaeu-rvTroJYui6Uw.jpeg)">
  <h1>.bg-right</h1>
</div>

.bg-bottom

<div class="p4 bg-cover bg-bottom white bg-gray" style="background-image: url(https://d262ilb51hltx0.cloudfront.net/max/2000/1*DZwdGMaeu-rvTroJYui6Uw.jpeg)">
  <h1>.bg-bottom</h1>
</div>

.bg-left

<div class="p4 bg-cover bg-left white bg-gray" style="background-image: url(https://d262ilb51hltx0.cloudfront.net/max/2000/1*DZwdGMaeu-rvTroJYui6Uw.jpeg)">
  <h1>.bg-left</h1>
</div>