title: Fixed image size scale according content with background-size cover
body: <p>I have spent several days trying to find best way to display background image properly on different screen sizes. </p>
  
  <p>Here is working example <a href="http://mobile-development.ru/" rel="nofollow noreferrer">http://mobile-development.ru/</a>. Here is <a href="https://jsfiddle.net/CROSP/pceva3pe/1/" rel="nofollow noreferrer">JSFiddle</a>.
  But it can be seen better on website.</p>
  
  <p>The problem is following.
  As you may see my initial image size is <code>1920x920</code>.<br>
  I have following <code>SASS</code> class for header image.  </p>
  
  <pre><code>$header-min-height: 920px;
  .l-header {
    min-height: $header-min-height;
    height: 110%;
    width: 100%;
    @include background-size(cover);
    background-position: center top;
    background-repeat: no-repeat;
    background-image:url('../images/background-header.jpg');
    @include respond-to-less-than(desktops) {
      min-height: $header-min-height*1.6;
  
    }
    @include respond-to-less-than(tablets) {
      min-height: $header-min-height*1.8;
    }
  }
  </code></pre>
  
  <p>Initial header background image looks good (not great but okay).
  And content fits.    </p>
  
  <p><a href="https://i.stack.imgur.com/vlcGU.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/vlcGU.jpg" alt="enter image description here"></a></p>
  
  <p>But when I screen size starts to decrease, because of <code>background-size</code> property image starts to scale. And furthermore as you can see for smaller screens I increase the <code>min-height</code> in order to fit content inside the image. 
  Because on small screens items in row take full width.   </p>
  
  <p><a href="https://i.stack.imgur.com/2SE0Y.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/2SE0Y.png" alt="enter image description here"></a></p>
  
  <p>And as you can see because of image scale and zoom quality of image becomes awful.    </p>
  
  <p>In case of square image I could take image with full height and display only part of it another part would be hidden under next div until required.   </p>
  
  <p>But in my case my image has rounded borders at the bottom, and I cannot achieve the same result using only CSS. </p>
  
  <p>I want to get result like that</p>
  
  <p><a href="https://i.stack.imgur.com/jwfwF.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/jwfwF.png" alt="enter image description here"></a></p>
  
  <p>To make this picture I just cropped equal to the previous screenshot part of initial image.</p>
  
  <p>Like that </p>
  
  <p><a href="https://i.stack.imgur.com/CrQc2.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/CrQc2.png" alt="enter image description here"></a></p>
  
  <p>I have no idea how to get desired result, to make image looks good on different screens. I've tried a lot of different tricks, but still as you see.   </p>
  
  <p>Please suggest what are possible ways to get desired result, is there only way to change different images according screen size (like <code>srcset</code>).
  At worst on screens smaller than <code>990px</code> image could be without rounded corner.
  I would be really grateful for any help of suggestion how to make it look good. </p>
  
  <p>Big thanks. </p>