Привязка фонового изображения к гриду

прошу вас о помощи

В браузерной игре-бродилке реализовано перемещение между секторами. Карта представляет собой локацию 50×50, а сектора этой локации- ячейки. Предполагается, что на фоне матрицы будет изображение, которое привязано к углам карты и полностью её накрывает задним фоном.

Пользователь же видит лишь часть карты, 7×5. То есть он должен видеть лишь часть изображения заднего фона.

.map {
display: grid;
grid-template-columns: repeat(7, 50px);
grid-template-rows: repeat(5, 50px);
background-image: url('location.jpg');
background-size: cover;

}

Таким образом я пытался привязать изображение к гриду, но оно выходит за рамки матрицы и не реагирует на перемещение персонажа.

Без изображения можете посмотреть на игра.вкурсах.рф/game.php