|
Alright, so I'm making a goofy web-1.0 site. Literally just at one html and one css file stage. I want a pixel art background image. I've set image-rendering to pixelated for the html element, which works in firefox for both background-image and <img> elements. In safari, it renders <img> elements like I want but it does not render the background how I want. So basically: code:
|
#
¿
Oct 28, 2023 22:27
|
|
|
|
| # ¿ May 21, 2024 01:16 |
|
|
Hmm it’s probably something hosed up with the way my MacBook is trying to render it then. The background image isn’t scaled, it’s just set as the background image with tiling. Same with the test image I’m including. But it’s still blurry. The image-rendering has some effect on how the page looks. I agree that it should not though, so I’m probably asking the wrong question.
|
|
#
¿
Oct 29, 2023 03:47
|
|
|
I should clarify that I already have the pixel art background and image. They’re pngs and I know that they are low resolution, have small palettes and no transparency (other than 100% transparency of the background). It’s just that it looks blurry when I include those things, except in Firefox when I include the image-rendering: pixellated. So it’s probably fundamentally something to do with the high-dpi display I have.
|
|
#
¿
Oct 29, 2023 03:55
|
|
|
Ok found a decent fix: just used image-set() with a 2x pre-scaled version. https://developer.mozilla.org/en-US/docs/Web/CSS/image/image-set
|
|
#
¿
Oct 29, 2023 21:21
|
|