title: Retina displays, high-res background images
body: <p>This might sound like a silly question.</p>
  
  <p>If I use this CSS snippet for regular displays (Where <code>box-bg.png</code> is 200px by 200px);</p>
  
  <pre><code>.box{
      background:url('images/box-bg.png') no-repeat top left;
      width:200px;
      height:200px
  }
  </code></pre>
  
  <p>and if I use a media query like this to target retina displays (With the @2x image being the high-res version); </p>
  
  <pre><code>@media (-webkit-min-device-pixel-ratio: 2), 
  (min-resolution: 192dpi) { 
  
      .box{background:url('images/box-bg@2x.png') no-repeat top left;}
  }
  </code></pre>
  
  <p>Do I need to double the size of the <code>.box</code> div to 400px by 400px to match the new high res background image?</p>