Tiled backgroung image pixelated on mobile and in desktop IE

1

Hi. I’m still working on my portfolio page, which is looking deliciously tacky :smile: . Anyway, I set a background image (a png of a coffee cup) for the body that tiles. I’ve set the size to 57x50px (the original image being 816x720). The image looks fine in Firefox on my desktop, but it looks a little blurry in chrome and pixelated in IE. It looks even worse in mobile browsers.

I tried resizing in Photoshop to exactly 57x50px and then re-uploading, but it still does the same. I also tried converting to jpg, but no luck. Can anyone please explain what is happening and how to fix?

EDIT: I originally linked to the wrong version of my portfolio, the correct link is: https://codepen.io/cakeisaliegaming/pen/WEvQQe

Thanks

2

I’ve just realised that I linked to the wrong version of my portfolio :flushed: . This is the one I need help with:
https://codepen.io/cakeisaliegaming/pen/WEvQQe