title: Make top image stay in position when main image resizes
body: <p>I have a main image and little callout buttons on top of the main image.  I'm trying to get the callout buttons to stay in position when the screen size changes while the main image size resizes with <code>max-width</code> and <code>background-size: contain</code>, but right now, the callout button's position changes.</p>
  
  <p>Here is the CSS:</p>
  
  <pre><code>.main_image
  {
     background: red;
     height: 400px;
     background-size: contain;
     position: relative;
     max-width: 100%;
  }
  
  .callouts
  {
     background-image: url(http://www.autotintspecialist.com/zoomButton_moused.png);
     height: 70px;
     width: 40px;
     height: 30px;
     position: absolute;
     top: 70px;
     right: 180px;
  }
  </code></pre>
  
  <p>Here is the HTML:</p>
  
  <pre><code>&lt;div&gt;
     &lt;img class="main_image" src="http://autotintspecialist.com/sOff_off.jpg"&gt;
  &lt;/div&gt;
  &lt;div class="callouts"&gt;&lt;/div&gt;
  </code></pre>
  
  <p>Here is the link to the fiddle: <a href="http://jsfiddle.net/Nem2C/" rel="nofollow">http://jsfiddle.net/Nem2C/</a></p>
  
  <p>As you resize the image, the callout button changes position, but I need it to stay where it's at when the image resizes.</p>
  
  <p>is there a jquery solution or a javascript solution to this as well?</p>