Render background image pixelated css

Question

I have got a little issue, here is my code.

img {
  image-rendering: pixelated;
}

div.fight {
  background: url("https://i.imgur.com/yM1ts8x.png");
  background-size: contain;
  width: 600px;
  height: 300px;
  position: relative;
}

div.fight img.player {
  position: absolute;
  bottom: 2%;
  left: 4%;
  height: 64px;
  width: 64px;
}

<div class="fight">
  <img src="https://i.imgur.com/VJhdtWy.png" class="player">
</div>

You can see code in action here http://jsfiddle.net/ctwgkodp/11/. (Excuse me for ugly pixel art)

As you can see in img, I set that all images in my app are rendered pixelated. The problem is that when I set background, I cannot force it to be pixelated.

Is there any way to force pixelated render to background of div.fight?

Thank you and have a nice day. :)

Answer 1

You are only applying the image-rendering: pixelated to the img tag. You also need to apply it to the .fight div:

img {
  image-rendering: pixelated;
}
div.fight{
  background: url("https://i.imgur.com/yM1ts8x.png");
  background-size: contain;
  width: 600px;
  height: 300px;
  position: relative;
  image-rendering: pixelated;
}
div.fight img.player{
  position: absolute;
  bottom: 2%;
  left: 4%;
  height: 64px; 
  width: 64px;
}

<div class="fight">
  <img src="https://i.imgur.com/VJhdtWy.png" class="player">
</div>

In fact you can remove the image-rendering from the img entirely since it will be inherited from the parent div.

div.fight{
  background: url("https://i.imgur.com/yM1ts8x.png");
  background-size: contain;
  width: 600px;
  height: 300px;
  position: relative;
  image-rendering: pixelated;
}
div.fight img.player{
  position: absolute;
  bottom: 2%;
  left: 4%;
  height: 64px; 
  width: 64px;
}

<div class="fight">
  <img src="https://i.imgur.com/VJhdtWy.png" class="player">
</div>