title: Make background image scale to size of content in front
body: <p>Basically I have a div with an image and a div inside of it with content. I need to make the background image be the size of whatever the content is, so grow/shrink accordingly.</p>
  <p>Right now, it only shows the full size of the image which results in a lot of space being left where there is no content.</p>
  <p>Here is my current styling, it is required I used flexbox.</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.section {
      height: 100%;
  
      .section_image {
          position: relative;
          height: 100%;
          display: flex;
          flex: 1 1 100%;
  
          img {
              object-fit: cover
          }
      }
  
      .content {
          position: absolute;
          display: flex;
          flex: 1 1 100%;
      }
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div className="section&gt;
      &lt;div className="section_image"&gt;
          &lt;img src={Image} alt="" /&gt;
      &lt;/div&gt;
      &lt;div className="content"&gt;
          &lt;h1&gt;Title&lt;/h1&gt;
          &lt;p&gt;Body Text&lt;/p&gt;
      &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>