How to fix pixelated background-image on Chromium-based browsers?

Question

On Chromium-based browsers, downscaled images used as background-image are pixelated while they look more blurred when displayed with an <img> tag. Is there a way to change the render style of a background image so it look like the display in the tag? I tried the image-rendering property but it doesn't seem to work on background-image . It looks fine on Firefox.

Example of render on Brave, left is background-image and right is with the <img> tag:

 #backgroundImage, img { width: 80px; min-height: 80px; margin: 10px 5px; display: inline-block; } #backgroundImage { background-repeat: no-repeat; background-position: center; background-size: cover; background-image: url("https://i.stack.imgur.com/X5EfB.png"); }

 <div id="backgroundImage"></div> <img src="https://i.stack.imgur.com/X5EfB.png" />

Answer 1

This seems to be happening only when both the size:cover and position:center rules are applying. You can have the same result in the <img> by changing its object-fit to cover :

 #backgroundImage, img { width: 80px; min-height: 80px; margin: 10px 5px; display: inline-block; object-fit: cover; } #backgroundImage { background-repeat: no-repeat; background-position: center; background-size: cover; background-image: url("https://i.stack.imgur.com/X5EfB.png"); }

 <div id="backgroundImage"></div> <img src="https://i.stack.imgur.com/X5EfB.png" />

So to avoid it, you can replace the background-size:cover rule with 100% 100% :

 #backgroundImage, img { width: 80px; min-height: 80px; margin: 10px 5px; display: inline-block; } #backgroundImage { background-repeat: no-repeat; background-position: center; background-size: 100% 100%; background-image: url("https://i.stack.imgur.com/X5EfB.png"); }

 <div id="backgroundImage"></div> <img src="https://i.stack.imgur.com/X5EfB.png" />