Why does "background-size" make images have a serrated edge in IE?

Asked

Viewed 169 times

0

I’m inserting some images with transparent background in an html page using the background-size feature of css, in IE these images are getting the serrated edges, how can I get around this problem?

<a href="#" class="iobOCF"></a>

.iobOCF{
  background:#6639b7 url(../content/images/iobOCF.gif) no-repeat center center;
  background-size:75%;
}
css image

1 answer

0

Add Rendering properties to the class your image is in.

.classe{
   -ms-interpolation-mode: nearest-neighbor;
}

In the CSS-Tricks has a nice tutorial on image-rendering.

  • I tried, it didn’t work.

  • You kept the aspect-ratio of the pictures? Sometimes what can happen is the browser renderer increases your image so that it fits in the right place and this can cause pixelation.

  • how I maintain Aspect-ratio?

Browser other questions tagged css image

You are not signed in. Login or sign up in order to post.