title: How to fit background image in all screen sizes?
body: <p>i am having issues with my background image. Somehow on big screen the head is cut off to fit the screen. Is there a way to ensure that 100% of the picture is always rendered regardless of size of the screen?
  initial property of background-size is cover but when set this way the top of the image is cut to fit the container. When i change background-size to 100% 100% as per below i get the result i want but the quality of the image is impacted. Is there a way to work around this. I have reviews most documentation related to background-image but none of them give me the result i want.
  both html and body  height/width are set to 100%.</p>
  <p>Thanks in advance for the help.
  Leo</p>
  <pre><code>.main .masthead {
      min-height: 100%;
      padding-top: 7.5rem;
      padding-bottom: 7.5rem;
      text-align: center;
      color: #fff;
      background: -webkit-gradient(linear, left top, left bottom, from(rgba(92, 77, 66, 0.8)), to(rgba(92, 77, 66, 0.8))), url(/_next/static/media/dr.cut_thebarbershow_blue.4a28589b.jpg);
      background: linear-gradient(to bottom, rgba(92, 77, 66, 0.8) 0%, rgba(92, 77, 66, 0.8) 100%), url(/_next/static/media/dr.cut_thebarbershow_blue.4a28589b.jpg);
      background-repeat: no-repeat;
      background-attachment: scroll;
      background-position: center center;
      background-size: 100% 100%;
      z-index: 1;
      width: 100vw;
  }
  </code></pre>
  <p><a href="https://kids8.sse.codesandbox.io/" rel="nofollow noreferrer">sandbox</a></p>