title: Cannot position properly an image when I create a responsive header
body: <p>Well I am new with this, so I have this url <a href="https://bestfamily.gr" rel="nofollow noreferrer">https://bestfamily.gr</a> and I tried to create a responsive header with image. I did the following with css</p>
  
  <pre><code>background: #000000 url(my_image_url) 100% 25% no-repeat;
  background-position: center;
  background-attachment: scroll;
  background-size: cover;
  </code></pre>
  
  <p>The image displays a family, so when I zoom in or zoom out the image performs responsively.</p>
  
  <p>But while I zoom out the image shrinks towards top and the faces in the image are not visible</p>
  
  <p>Can I make the image to be shown normal and not actually hidden</p>