title: Create Fluid Background Image with CSS
body: <p>I am trying to build a simple fluid image that can resize based on screen size.</p>
  
  <p>But I am having trouble to get the image smaller when the width of the browser gets smaller.</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;main&gt;
      &lt;section class="slider-ctn"&gt;
          &lt;figure class="logo"&gt;&lt;/figure&gt;
      &lt;/section&gt;
  &lt;/main&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>.slider-ctn figure.logo {
      margin: auto;
      background-image: url('../Images/logo.200x100.png');
      width: 200px;
      height: 100px;
  }
  </code></pre>