How big should background images be?


For example, this is how it looks in my test run

But once on the site, this is what I get:

I’ve seen this happen in other games that should be page-wide background. It seems there’s a container that’s resizing and tiling the bg images. Mysteriously it works fine running index.html off the local disk, so what’s up with the online version?.

Any workaround to this?


You posted the same image twice.




The online version works as it should for me using Google Chrome (at your game).


Well, 768x1366 is probably the minimum you’d want to go with, but that’s still around one out of every four people seeing your background incorrectly, so I’d probably say that, to be ‘safest’, you should want to stick to something around 1200x1920.

(Now those don’t take into account trim from the browser/OS UI, but that’s relatively negligible, so I would’t try to account for it.)

Of course, that assumes the page isn’t shrinking the image for some reason. Just to see, what’s the image size and what is your screen resolution?


The image size is 1280 by 1580 and my screen is 1280 by 1024.


First, let me correct myself, when I said 768x1366 and 1200x1920, those should actually be written 1366x768 and 1920x1200, which is width by height (I always write those backwards).

Okay, that image is actually has a lot of jagged parts, but it doesn’t appear to in your first screen shot, perhaps it got corrupted in uploading somehow? Take a look at the image directly ( and tell me if that’s what it’s supposed to look like. Either way, it’s difficult for me to visually tell what is wrong. If you can replace the image with something like this (, it may help to see what is where. (and therefore what is breaking).

When I run the game, it seems to be working. It gets to the end of the image, then tiles (so it just repeats the very edge of the image).