Hello tout le monde! 
je suis en train de me casser la tête un petit problème. Voici ma problématique (je débute dans le css et y a encore pas mal de chose que je ne comprend pas. 

Je suis en train de travailler sur un petit site pour le fun et pour mettre en pratique ce que j'apprend. Pour ce faire, j'ai pris un univers de jeux 8 bit. 
J'ai donc réalisé une illustration pour mon background, en 300 par 225 pixel, me permettant ainsi d'avoir l'effet de pixel tant désiré dans mon sujet illustrtatif. 

Lorsque je charge cette image dans mon css, et que celle ci apparait ensuite dans mon site, il y a une remise en forme des pixels par le redimentionement de mon image. en gros, elle devient plus "net" et je ne sais pas exactement dans sens prendre le probléme: 
dois je retravailler mon image en amont pour que même avec une grande quantité de pixel elle ai un look pixelisé, ou alors puis je la gardé en petit format et prévoir dans le css un systéme me permettant de garder la résolution initiale? 

voici une capture d'ecran pour illustrer mon problème:
illustration dans photoshop:


illustration dans mon navigateur:




si quelqu'un pouvait éclairer ma lanterne?

merci d'avance

Bonjour,

quel est le CSS que tu as utilisé ? Tu as mis background-size: cover, je suppose ?

Il existe la propriété image-rendering : https://developer.mozilla.org/en-US/docs/Web/CSS/image-rendering mais je ne sais pas très bien comment ça se comporte sur une image de fond. À tester (lis bien la note dans la section Browser compatibility)

woa merci! c'est parfait! 
juste cette petite ligne a rendu mon taf quasi à l'identique. 


Aprs en terme de logique, je me dit: je passe d'une image pixelisé à une image reformaté puis repixelisé, je ne sais pas si c'est hyper propre (ça c'est plus pour savoir et c'est le coté perfectionniste qui veut apprendre qui parle) mais.... ton bout de code répond parfaitement à ma demande!! 

merci encore!!

-
Edité par syhnes 26 novembre 2023 à 9:47:40

Nickel !

Attention aussi, cette propriété est héritable, si tu as d'autres images parmi les descendants de l'élément où tu as mis image-rendering (que ce soit en fond ou sous forme d'image dans le html) elles auront aussi cet aspect, vérifie bien le rendu

Autre chose qu'on aurait pu tenter : que tu redimensionnes ton image dans ton logiciel de dessin, en prenant soin de garder la pixellisation (je suis sûre que ça se trouve), pour lui donner sa taille finale directement et ainsi ne pas avoir à faire faire le boulot par le navigateur. Mais déjà, si ce que tu as te convient, c'est super, je suis ravie.

merci à tous! j'ai pu en profiter pour tester difféente technique (dont la redimension de pixel directement dans mon logiciel) ce qui fait que là ou j'avais une problématique, j'ai maintenant plusieurs réponses tout aussi fonctionnelles les une que les autres