Check out Grant Acedrex, our featured variant for April, 2024.


[ Help | Earliest Comments | Latest Comments ]
[ List All Subjects of Discussion | Create New Subject of Discussion ]
[ List Earliest Comments Only For Pages | Games | Rated Pages | Rated Games | Subjects of Discussion ]

Single Comment

Interactive diagrams. Diagrams that interactively show piece moves.[All Comments] [Add Comment or Rating]
🕸Fergus Duniho wrote on Wed, Oct 11, 2017 01:10 PM UTC:

2) The background images are positioned differently in the cells than the content images. The latter had margins, and to prevent board raks from expanding when you moved a piece to an empty rank, the square size had to be chosen a few pixels larger than the actual piece images (e.g. 53x53 for Alfaerie, which has 50x50 gif images). The background image always starts in the upper-left corner, and the cell is then tiled with as many copies of the image as are needed to cover it completely. This means that a few pixels eear the upper and left edge get repeated near the right and bottom edge. Some pieces are so big that they have visible parts this close to the edge, and then you get ugly artifacts rear the latter edges. This can be prevented by defiing the square size exactly equal to the image size (and perhaps make the marker images a bit smaller, and center those, to prevent their margins would cause cells to expand). But all existing images do not have that.

CSS has background properties that will let you center a background image without any tiling. For example:

STYLE="background-repeat: no-repeat; background-position: center center;"

You could also use the single background property for multiple values, such as background color, background image, background repeat, and background position.