title: Responsive background image for a container
body: <p><strong>Hello !</strong></p>
  <p>I am struggling to put this background image to fit the container and make it responsive cropping for smaller devices, if anyone has an idea of how I can do that please let me know.</p>
  <p><strong>Can anyone please help me here?</strong></p>
  <p><strong>Here is the background image with the shadows and I would like it to stay that way.</strong></p>
  <p><a href="https://i.stack.imgur.com/Zad2v.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Zad2v.png" alt="enter image description here" /></a></p>
  <p><strong>Code:</strong></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>.pj-container {
    background-color: frey;
    padding: 39px;
    position: relative;
    z-index: 2;
    background: url(https://i.stack.imgur.com/Zad2v.png);
    background-repeat: no-repeat;
    background-position: center;
    background-size:cover;
    background-position:bottom
  }
  
  .container {
      width: 80%;
      margin-right: auto;
      margin-left: auto;
  }
  
  .pj {
    $pieces_justificatives: &amp;;
    &amp;--wrapper {
      #{$pieces_justificatives} {
        &amp;__title {
          margin: 0;
          font-size: 24px;
        }
        &amp;__card {
          box-sizing: border-box;
          border: 1px solid #d6d7dc;
          border-radius: 6px;
          background-color: rgba(241, 242, 246, 0.22);
          padding: 18px 24px 20px !important;
        }
        &amp;__list {
          li {
            font-weight: bold;
            counter-increment: mylistcounter;
          }
          li::before {
            background-color: #fddf36;
          }
  
          span::before {
            display: inline-block;
            content: counter(mylistcounter) " . ";
            margin-right: 5px;
          }
        }
        &amp;__amount {
          color: #02afbc !important;
          font-family: Roboto;
          font-size: 30px;
          font-weight: bold;
          letter-spacing: 0;
          line-height: 32px;
          margin-left: 0 !important;
        }
      }
    }
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div&gt;
    &lt;div&gt;
      &lt;div class="paragraph-block__block"&gt;
        &lt;div class="block"&gt;
          &lt;div class="block__content"&gt;
            &lt;div class="mt-4 pj-container container"&gt;
               &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Dolor morbi non arcu risus quis varius quam. Tortor vitae purus faucibus ornare suspendisse sed nisi lacus. Cursus sit amet dictum sit amet. Egestas quis ipsum suspendisse ultrices gravida dictum fusce. Pharetra pharetra massa massa ultricies mi quis. Nulla pharetra diam sit amet. Ipsum faucibus vitae aliquet nec ullamcorper sit amet risus. Lacus sed turpis tincidunt id aliquet risus feugiat. Dolor morbi non arcu risus. Ac ut consequat semper viverra nam libero justo laoreet sit. Lobortis scelerisque fermentum dui faucibus in ornare quam viverra. Viverra orci sagittis eu volutpat odio facilisis. Adipiscing elit duis tristique sollicitudin nibh sit amet commodo nulla. Lacus luctus accumsan tortor posuere.
  
  Aenean pharetra magna ac placerat vestibulum. Est pellentesque elit ullamcorper dignissim cras tincidunt lobortis feugiat vivamus. Risus ultricies tristique nulla aliquet enim tortor at auctor urna. Quis varius quam quisque id diam vel. Fusce ut placerat orci nulla pellentesque. Venenatis lectus magna fringilla urna porttitor rhoncus dolor purus. Ac placerat vestibulum lectus mauris ultrices eros. Nulla facilisi morbi tempus iaculis urna id. Amet nisl purus in mollis nunc sed id semper risus. Mattis aliquam faucibus purus in massa tempor nec feugiat. Morbi leo urna molestie at elementum. Faucibus a pellentesque sit amet porttitor. Ornare suspendisse sed nisi lacus sed viverra. Eget gravida cum sociis natoque penatibus et magnis dis. Volutpat commodo sed egestas egestas fringilla phasellus faucibus scelerisque. Enim ut tellus elementum sagittis vitae et leo duis ut. Ut tellus elementum sagittis vitae et leo. Nascetur ridiculus mus mauris vitae. Tincidunt id aliquet risus feugiat in. Malesuada pellentesque elit eget gravida cum sociis natoque.&lt;/p&gt;
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/div&gt;          
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>