Prevent scaling of background image

Asked Jun 15 '17 at 15:06

Active Jun 16 '17 at 08:03

Viewed 46 times

So basically I have this project where I'm trying to make a magnifying glass. The problem I encountered is that for a really zoomed in pictures, I don't have a clean zoom.

When I zoom on one screenshot, I get this:

I would like to get this:

Don't mind the scale here, I'm talking about the blurring effect! I think it's due to the fact that I'm using background size property to power my zoom and that it'sscaling the image. How can I prevent that from happening and keep a neat PNG zoom?

SOLVED

I have my solution thanks to you all. I added this to my css styles.

image-rendering: pixelated;

I works fine for me on recent Chrome version.

edited Jun 16 '17 at 08:03

asked Jun 15 '17 at 15:06

Philippe

1

You use an appropriately sized image... – Patrick Roberts Jun 15 '17 at 15:07
By the way, "converting the source to jpg" is incorrect, it's _aliasing_ it. – Patrick Roberts Jun 15 '17 at 15:09
Thank you for your help. I'm not a native speaker and I never heard that expression. I tried to formulate it with my little knowledge – Philippe Jun 15 '17 at 15:12

Prevent scaling of background image

SOLVED

0 Answers0