There are several things in your code that don't make sense.
For instance, you *SEEM* to specify that the size of a "grass" image is 50x50 pixels. You *SEEM* to do that here:
Code:
#grass{
height: 50px;
width: 50px;
background: url(new/grass.png):
position: relative;
float: left;
}
But that's all wrong, because you are using
#grass so that style will *ONLY* affect an element which has
id="grass". If it was meant to affect MANY elements, it should have been specified as
.grass and then the elements would use
class="grass".
In any case, when you increment the positions where you draw the images, you only increase by 25 pixels to the right and down.
The increases *MUST* match the sizes of the images you are dropping in there.
When you reset the tilePos you do
yet in the initialization code you did
But both of them needlessly complicate matters.