title: Disable antialising when scaling images
body: <blockquote>
  <p><strong>Possible Duplicate:</strong><br />
  <a href="https://stackoverflow.com/questions/8597081/how-to-stretch-images-with-no-antialiasing">How to stretch images with no antialiasing</a></p>
  </blockquote>
  
  <p>Is it in any way possible to disable antialiasing when scaling up an image ?</p>
  <p>Right now, i get something that looks like this :</p>
  <p><img src="https://i.stack.imgur.com/NXJxc.png" alt="What i get" /></p>
  <p>Using the following css code :</p>
  <pre class="lang-css prettyprint-override"><code>#bib {
      width: 104px;
      height: 104px;
      background-image: url(/media/buttonart_back.png);
      background-size: 1132px 1360px;
      background-repeat: no-repeat;
  }
  </code></pre>
  <p>What I would like, is something like this :</p>
  <p><img src="https://i.stack.imgur.com/t1lml.png" alt="What i seek" /></p>
  <p>In short, any CSS flag to <strong>disable</strong> anti-aliasing from when scaling up images, preserving hard edges.</p>
  <p>Any javascript hacks or similar are welcome too.</p>
  <p>(Yes, I am aware that php and imagemagick can do this as well, but would prefer a css based solution.)</p>
  <p><strong>UPDATE</strong>
  The following have been suggested :</p>
  <pre class="lang-css prettyprint-override"><code>image-rendering: -moz-crisp-edges;
  image-rendering: -moz-crisp-edges;
  image-rendering: -o-crisp-edges;
  image-rendering: -webkit-optimize-contrast;
  -ms-interpolation-mode: nearest-neighbor;
  </code></pre>
  <p>But that doesn't seem to work on background images.</p>