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>