Use the .bg-cover
or .bg-contain
utilities to control background size.
.bg-cover
<div class="p4 bg-cover" style="background-image: url(/docs/placeholder.svg)">
<code>.bg-cover</code>
</div>
Use background position utilities to control position.
.bg-center
<div class="p4 bg-cover bg-center" style="background-image: url(/docs/placeholder.svg)">
<code>.bg-center</code>
</div>
.bg-top
<div class="p4 bg-cover bg-top" style="background-image: url(/docs/placeholder.svg)">
<code>.bg-top</code>
</div>
.bg-right
<div class="p4 bg-cover bg-right" style="background-image: url(/docs/placeholder.svg)">
<code>.bg-right</code>
</div>
.bg-bottom
<div class="p4 bg-cover bg-bottom" style="background-image: url(/docs/placeholder.svg)">
<code>.bg-bottom</code>
</div>
.bg-left
<div class="p4 bg-cover bg-left" style="background-image: url(/docs/placeholder.svg)">
<code>.bg-left</code>
</div>