Why is my css not working with image smoothing

img {
  image-rendering: pixelated;
}

canvas {
  image-rendering: pixelated;
}

body {
  padding: 0px;
  margin: 0px;
  border-width: 0px;
}

html {
  padding: 0px;
  margin: 0px;
  border-width: 0px;
  image-rendering: pixelated;
}

#webpage-background {
  width: 100%;
  height: 100%;
  position: fixed;
  image-rendering: pixelated;
}

<body>
  <img src="res/images/POTATO_BACKGROUND.png" id="webpage-background" style="image-rendering: pixelated;">
  <canvas>
    </body>