title: Stop Background-img from resizing when shrinking the browser window
body: <p>I've been trying to stop the <strong>background-img</strong> from resizing, because It interferes with this JavaScript code that keep the red dots or <strong>pointer</strong> on the background-img as I resize the browser. </p>
  
  <p><strong>PROBLEM:</strong>
  When re-sizing the browser window the background-img resizes and the red-dots stay in the same place. I want it to STOP resizing.
  <a href="https://i.stack.imgur.com/BsGWH.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/BsGWH.png" alt="enter image description here"></a></p>
  
  <p><strong>WHAT I WANT</strong>: </p>
  
  <p><strong>1.</strong> I want the red dots to <strong>NOT MOVE</strong> from the specific part of the background-img. I'm guessing we have to tweak the JavaScript for this.  </p>
  
  <p><strong>2.</strong> When I resize or open a smaller browser window the background-Image should <strong>STAY THE SAME SIZE</strong>, and whatever is out of view should stay out of view.I'm assuming this is a CSS issue. 
  <a href="https://jsfiddle.net/L1doxa1y/4/" rel="nofollow noreferrer">Here's my fiddle</a></p>
  
  <p>Please, let me know what change I should make to the JavaScript to make sure the red dots stay in the same place, and the CSS to make sure the background-img is not resized but left out of view. Thank you!
  <strong>CSS:</strong></p>
  
  <pre><code>.container {
      background:url(http://www.seomofo.com/downloads/new-google-logo-knockoff.png) no-repeat center center fixed;
      width: 1000px;
      height: 380px;
       background-size:contain;
  }
  
  .wrapper  {     background-image: linear-gradient(360deg, #0d58a6, #0a488a);}
  .top {height:100%; width:1000px: background:blue; }
  
  .pointer {
      margin-left:-10px;
      margin-top:-10px;
      width:20px;
      height:20px;
      border-radius:10px;
      background-color:#F00;
      position:fixed;
  }
  </code></pre>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;div class="wrapper"&gt;
  &lt;div class="container"&gt;
  &lt;div id="pointer1" class="pointer"&gt;&lt;/div&gt;
  &lt;div id="pointer2" class="pointer"&gt;&lt;/div&gt;
  &lt;div id="pointer3" class="pointer"&gt;&lt;/div&gt;
  &lt;div id="pointer4" class="pointer"&gt;&lt;/div&gt;
  &lt;div id="pointer5" class="pointer"&gt;&lt;/div&gt;
  &lt;div id="pointer6" class="pointer"&gt;&lt;/div&gt;
  &lt;div id="pointer7" class="pointer"&gt;&lt;/div&gt;
  &lt;div id="pointer8" class="pointer"&gt;&lt;/div&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>JS</strong></p>
  
  <pre><code>var image = { width: 550, height: 190 };
  
  var target = new Array();
  target[0] = { x: 184, y: 88 };
  target[1] = { x: 284, y: 88 };
  target[2] = { x: 384, y: 88 };
  target[3] = { x: 484, y: 88 };
  target[4] = { x: 184, y: 150 };
  target[5] = { x: 284, y: 150 };
  target[6] = { x: 384, y: 150 };
  target[7] = { x: 484, y: 150 };
  
  var pointer = new Array();
  pointer[0] = $('#pointer1');
  pointer[1] = $('#pointer2');
  pointer[2] = $('#pointer3');
  pointer[3] = $('#pointer4');
  pointer[4] = $('#pointer5');
  pointer[5] = $('#pointer6');
  pointer[6] = $('#pointer7');
  pointer[7] = $('#pointer8');
  
  
  $(document).ready(updatePointer);
  $(window).resize(updatePointer);
  
  function updatePointer() {
      var windowWidth = $(window).width();
      var windowHeight = $(window).height();
  
      // Get largest dimension increase
      var xScale = windowWidth / image.width;
      var yScale = windowHeight / image.height;
      var scale;
      var yOffset = 0;
      var xOffset = 0;
  
      if (xScale &gt; yScale) {
          // The image fits perfectly in x axis, stretched in y
          scale = xScale;
          yOffset = (windowHeight - (image.height * scale)) / 2;
      } else {
          // The image fits perfectly in y axis, stretched in x
          scale = yScale;
          xOffset = (windowWidth - (image.width * scale)) / 2;
      }
  
      var arrayLength = target.length;
  
      for (var i = 0; i &lt; arrayLength; i++) {
          pointer[i].css('top', (target[i].y) * scale + yOffset);
          pointer[i].css('left', (target[i].x) * scale + xOffset);
      }
  
      }
  </code></pre>