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" />
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
This only seems to happen when both the
size:coverandposition:centerrules are applied. You can get the same result inby changingobject-fitto![]()
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"); }