title: How to zoom in a background image to the center of it
body: <p>How do I zoom in a high quality image, for instance 2000px x 2000px, to the center of a container ? I've tried using <code>transform: scale ()</code> but it still makes it scrollable vertically or horizontally. I'm specifically looking for a mobile version. How do I make the image zoomed in centered exactly according to the width of mobile? Using <code>width: 100%</code> doesn't help either. And if I define it like in the code below using pixels it is cropped out on mobile. Do I make it exactly width and height or mobile or? I need it to fully cover whole body and be zoomed in exactly in the center of image. Thanks for you answers. Also zoomed quality is really bad even though it is high quality image.</p>
  
  <p><strong>Basically center and zoom this image <a href="https://i.stack.imgur.com/SGthw.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/SGthw.png" alt="bg"></a> so that on mobile it will  cover whole screen, spin and look like this: <a href="https://i.stack.imgur.com/SW4bz.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/SW4bz.png" alt="zoomed bg"></a></strong></p>
  
  <pre><code>    body {
      padding:0;
      margin:0;
    width: 100%;
    height: 100%;
  
  }
  #wrap {
    transform: scale(2.0);
  }
  #bg {
    width: 1400px;
    height: 1400px;
    background: url(bg.png);
    background-size: contain;
    background-position: center center;
    -webkit-animation: rotation 9s infinite linear;
  }
  </code></pre>