Firefox div pixelated background image not working

user_10542998 0
Viewed 92

I have a little problem. Image-rendering is not working on background image of div in Firefox but in Chrome it works fine.

How can I pixelate the background in Firefox too?

<div id="loadingScreen" class="loadingScreen">
    ...
</div>

.loadingScreen{
    position:fixed;
    top:0;
    left:0;
    z-index:50;
    width:100%;
    height:100%;
    background-color:#322007;
    background-image:url("../assets/textures/gui/menu_background.png");
    background-size:64px;
    image-rendering:pixelated;
    background-position:center;
}

Background image -> Background image

Result with same code: Background image in Chrome and Firefox

firefox google-chrome background-image css html
2 Answers

I think I solved it.

I've added a line with crisp-edges and it looks same. In Chrome only works with pixelated and in Firefox only with crisp-edges.

image-rendering: pixelated;
image-rendering: crisp-edges;
user_105429980
user_147882560
Related