I'm currently in the process of developing an application to visualize hockey shot data, utilizing an XY amChart for plotting. I have successfully added a background image over the chartdiv using the following CSS:
#chartdiv{
background-image: url("/imgs/rink.png");
background-repeat: no-repeat;
background-size: calc(100% - 10px) calc(100% - 10px);
}
Despite my efforts to use calc
to align the image perfectly within the grid lines, it seems that it does not render consistently on all displays. The CSS code above produces different outcomes on two separate screens:
https://i.sstatic.net/aEi3O.png
And: https://i.sstatic.net/3wdqY.png
You will notice an overlap on the left side of the second image.
Any suggestions on how I can ensure that the image stays within the grid lines without any overlap?