HTML Disable anti-aliasing on background-image

Question

I've seen many methods for disabling anti aliasing for images, but how can I apply this to the "background-image"? I have divs with a background image, and the aliasing code isn't working with it. Can't somebody help?

@dreamhunter I have tried this: http://stackoverflow.com/questions/14068103/disable-antialising-when-scaling-images doesn't work... — Legomite, Dec 03 '16 at 00:08

score 2 · Answer 1 · answered Dec 02 '16 at 07:08

Have you tried image-rendering: pixelated; on the Class of your background image div?

If not, you can try this tutorial on CSS-Tricks

Here is the summery. All rights to original Authors

.pixelated {
      image-rendering: pixelated;
}

.resize {
  width: 45%;
  clear: none;
  float: left;
}
.resize:last-of-type {
  float: right;
}
.resize img {
  width: 100%;
}

img {
  margin-bottom: 20px;
  max-width: 100%;
}

body {
  background-color: #444;
  color: #fff;
  padding: 2em;
}

<div class="original">  
    <h1>Original image size</h1>   
    <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/14179/qrcode.png" alt="" />
</div>
<div class="resize">  
  <h2>
    <code>image-rendering: auto;</code>
  </h2> 
  <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/14179/qrcode.png" alt="" />
</div>
<div class="resize">  
  <h2>
    <code>-rendering: pixelated;</code>
  </h2> 
  <img class="pixelated" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/14179/qrcode.png" alt="" />
</div>

I have already tried that, plus these methods http://stackoverflow.com/questions/14068103/disable-antialising-when-scaling-images but it doesn't work on background-image images — Legomite, Dec 03 '16 at 00:11

HTML Disable anti-aliasing on background-image

1 Answers1