Question 43909 in Html Question posted in
Some basic documentation can be found here.

How do I stop my pixelated background image from turning blurry when repeated? – Html

I have a pixel art background that is pixelated normally but as soon as the window is wide enough for it to start repeating the entire image turns blurry.

position: absolute;
bottom: 0;
height: 200px;
width: 100%;

background-size: auto 100%;
background-repeat: repeat-x;
image-rendering: pixelated;

The div element is as simple as follows (React.js):

<div className='footer' style={{ backgroundImage: `url(${Image})` }}></div>

I have tried setting the image-rendering to crisp-edges but that did not change anything.

Neither does any of the following that I have found in other threads:

image-rendering: -moz-crisp-edges;
image-rendering: -o-crisp-edges;
image-rendering: -webkit-optimize-contrast;
-ms-interpolation-mode: nearest-neighbor;

More info:

I have discovered that if I zoom in to the image it is no longer blurry, it is only when I am zoomed out it appears so.
I have tried scaling the image up to have a higher resolution. It makes the problem harder to spot but it does not solve anything.

—————————————————————
I “solved” this (stopped it from bothering me) by using background-size to make the image bigger. Thus hindering it from repeating at all for normal sized displays. The issue would still persist for wider screens though.

Tags:

2

Answers


  1. 0

    I don’t think this image-rendering: -moz-crisp-edges; image-rendering: -o-crisp-edges; image-rendering: -webkit-optimize-contrast; -ms-interpolation-mode: nearest-neighbor; will help the image not to blurry.

    If we use this image-rendering: pixelated;
    Is this answered your question?

    I hope i could help in some ways.

    Login or Signup to reply.
  2. 0

    You can try adding the following CSS property to your .footer element:

    background-position: top left;

    This will ensure that the image is always aligned to the top-left corner of the container, which can help prevent any blurring or distortion that might occur when the image is repeated.

    You can also experiment with different background-size values to see if any of them help to mitigate the blurring. For example, you might try setting background-size: cover or background-size: contain to see if either of those options provides a better result.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search