title: Full screen scaling background image overlays
body: <p>I have a page whose background image scales as the browser re-sizes. What I'm trying to figure out is how to make the blue marker image scale and maintain position in proportion to the background. For example, if the blue marker were on the tip of the harbor, as I scaled the browser down, I'd want that marker to stay on the tip of the harbor and shrink in size proportionally with the browser's new dimensions.</p>
  
  <p><strong>Anyone have any ideas that will point me in the right direction?</strong> </p>
  
  <p>I used the below method to find the browser size, but I think my math's a little off. You can view the live example here:</p>
  
  <p><a href="http://mikeheavers.com/stage/full_screen_map/" rel="nofollow">http://mikeheavers.com/stage/full_screen_map/</a></p>
  
  <p>The marker gets really off if you scale it in one direction more than the other.</p>
  
  <pre><code>    &lt;style type="text/css"&gt;
          html {
  
                  background: url(images/antigua.jpeg) no-repeat center center fixed;
                  -webkit-background-size: cover;
                  -moz-background-size: cover;
                  -o-background-size: cover;
                  background-size: cover;
          }
  
          #infoDiv {
              background: white;
              padding: 20px;
              width: 200px;
              position:absolute;
          }
  
          #map_canvas {
              position:absolute   ;
          }
  
          .marker {
              position:absolute;
              left: 800px;
              top: 400px;
              height: 20px;
              width: 20px;
              background: #ff0000;
          }
  
      &lt;/style&gt;
      &lt;script type="text/javascript" charset="utf-8" src="js/jquery-1.4.4.min.js"&gt;&lt;/script&gt;
  
  
  
          &lt;div id="infoDiv"&gt;
  
          &lt;/div&gt;
  
          &lt;div id="markers"&gt;
              &lt;div class="marker"&gt;
              &lt;/div&gt;
          &lt;/div&gt;
  
          &lt;script type="text/javascript"&gt;
  
  
              $(document).ready(function() 
              {   
  
                  var myWidth = window.innerWidth;
                  var leftVal = $("#markers").children().css('left');
                  var leftValNumber = parseFloat(leftVal);
                  var leftRatio = leftValNumber / myWidth;
                  var leftValPos;
  
                  var myHeight = window.innerHeight;
                  var topVal = $("#markers").children().css('top');
                  var topValNumber = parseFloat(topVal);
                  var topRatio = topValNumber / myHeight;
                  var topValPos;
  
                  var scaleRatio;
  
                  if (myWidth &gt; myHeight){
                      scaleRatio = 20/myWidth;
                  } else {
                      scaleRatio = 20/myHeight;
                  }
  
  
                  window.onresize = function() {
  
                      sizeMarkers();
  
                  }
  
                  function init()
                  {
  
  
  
                      sizeMarkers();
  
                  }
  
                  function sizeMarkers()
                  {
  
  
                        if( typeof( window.innerWidth ) == 'number' ) {
                          //Non-IE
  
                          myWidth = window.innerWidth;
                          myHeight = window.innerHeight;
                        } else if( document.documentElement &amp;&amp; ( document.documentElement.clientWidth || document.documentElement.clientHeight ) ) {
                          //IE 6+ in 'standards compliant mode'
                          myWidth = document.documentElement.clientWidth;
                          myHeight = document.documentElement.clientHeight;
                        } else if( document.body &amp;&amp; ( document.body.clientWidth || document.body.clientHeight ) ) {
                          //IE 4 compatible
                          myWidth = document.body.clientWidth;
                          myHeight = document.body.clientHeight;
                        }
                          topVal = $("#markers").children().css('top');
                          topValNumber = parseFloat(topVal);
                          topValPos = topRatio * myHeight;
  
                          leftVal = $("#markers").children().css('top');
                          leftValNumber = parseFloat(leftVal);
                          leftValPos = leftRatio * myWidth;
  
                          if (myWidth &lt; myHeight){
                              $("#markers").children().width(myWidth*scaleRatio);
                              $("#markers").children().height(myWidth*scaleRatio);
                          } else {
                              $("#markers").children().width(myHeight*scaleRatio);
                              $("#markers").children().height(myHeight*scaleRatio);
                          }
  
  
                          $("#markers").children().css('top',topValPos);
                          $("#markers").children().css('left',leftValPos);
  
                          $("#infoDiv").html( 'Width = ' + myWidth + ' | Height = ' + myHeight + ' | Top Value: ' + topValPos + ' | Left Value: ' + leftValPos);
  
  
                  }
  
                  init();
  
               });
  
  
  
          &lt;/script&gt;
  </code></pre>