On Chromium-based browsers, reduced images used as background-image
will be pixelated and will look more pixelated when displayed using the <img>
tag Vague. Is there a way to change the rendering style of the background image so that it looks like it is displayed in the label? I tried the image-rendering
property but it doesn't seem to work with background-image
. It looks good on Firefox.
Brave with background-image
on the left and <img>
on the right Tags:
#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" />
This only seems to happen when both the
size:cover
andposition:center
rules are applied. You can get the same result inby changing
object-fitto cover
: