title: Background image getting cropped instead fitting in element on mobile devices
body: <p>I have code to show a background image in a card header like below:</p>
  <pre><code>&lt;div class=&quot;card-heading&quot;&gt;&lt;/div&gt;
  </code></pre>
  <p>and in CSS:</p>
  <pre><code>.card-1 .card-heading {
    background: url(&quot;../images/bg-head-02.jpg&quot;) center center/cover no-repeat;
    padding-top: 210px;
  }
  </code></pre>
  <p>In desktop its looking fine like this:</p>
  <p><a href="https://i.stack.imgur.com/XRqS8.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/XRqS8.png" alt="enter image description here" /></a></p>
  <p>But in mobile device its getting cut off like below:</p>
  <p><a href="https://i.stack.imgur.com/Rmn8n.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Rmn8n.png" alt="enter image description here" /></a></p>
  <p>How can I fix my code so that it also fits in mobile.</p>