<h2 class="toc">Background</h2>

<p><code>.bg-no-repeat</code>, <code>.bg-space</code> and <code>.bg-round</code> define the <code>background-repeat</code> behavior.</p>

{% apply view_source %}
<div class="             d-inline-block bg-img-sm border"><svg width="160" height="90"></svg></div>
<div class="bg-no-repeat d-inline-block bg-img-sm border"><svg width="160" height="90"></svg></div>
<div class="bg-space     d-inline-block bg-img-sm border"><svg width="160" height="90"></svg></div>
<div class="bg-round     d-inline-block bg-img-sm border"><svg width="160" height="90"></svg></div>
{% end %}

<p><code>.bg-cover</code> and <code>.bg-contain</code> set the background size.</p>
{% apply view_source %}
<div class="bg-cover     d-inline-block bg-img"><svg width="160" height="90"></svg></div>
<div class="bg-contain   d-inline-block bg-img"><svg width="160" height="90"></svg></div>
{% end %}

<p><code>.bg-fixed</code> controls the scrolling behaviour.</p>
{% apply view_source %}
<div class="bg-fixed     d-inline-block bg-img bg-contain"><svg width="270" height="90"></svg></div>
<div class="bg-local     d-inline-block bg-img bg-contain"><svg width="160" height="90"></svg></div>
{% end %}

<p><code>.bg-center</code> centers the background. Other background positioning classes are available.</p>
{% apply view_source %}
<div>
  <div class="bg-tl  d-inline-block bg-img-sm bg-no-repeat border"><svg width="160" height="90"></svg></div>
  <div class="bg-tc  d-inline-block bg-img-sm bg-no-repeat border"><svg width="160" height="90"></svg></div>
  <div class="bg-tr  d-inline-block bg-img-sm bg-no-repeat border"><svg width="160" height="90"></svg></div>
</div>
<div>
  <div class="bg-cl  d-inline-block bg-img-sm bg-no-repeat border"><svg width="160" height="90"></svg></div>
  <div class="bg-cc  d-inline-block bg-img-sm bg-no-repeat border"><svg width="160" height="90"></svg></div>
  <!-- .bg-center is an alias for .bg-cc -->
  <div class="bg-cr  d-inline-block bg-img-sm bg-no-repeat border"><svg width="160" height="90"></svg></div>
</div>
<div>
  <div class="bg-bl  d-inline-block bg-img-sm bg-no-repeat border"><svg width="160" height="90"></svg></div>
  <div class="bg-bc  d-inline-block bg-img-sm bg-no-repeat border"><svg width="160" height="90"></svg></div>
  <div class="bg-br  d-inline-block bg-img-sm bg-no-repeat border"><svg width="160" height="90"></svg></div>
</div>{% end %}


<p><code>.bg-parellax</code> keeps the background fixed while the content scrolls. It is the same as
  <code>.bg-center .bg-no-repeat .bg-fixed .bg-cover</code></p>

{% apply view_source %}
<div class="bg-img bg-parellax text-secondary">
  <h1 class="mx-5">Parellax effect</h1>
  <p class="mx-5">Scroll the page to view it</p>
</div>
{% end %}
