Помогите понять синтаксис

Ответ

Тут стоит понимать, что background это сокращение, для того чтобы сразу можно было установить несколько свойств. А именно background-clip, background-color, background-image, background-origin, background-position, background-repeat, background-size, и background-attachment (порядок важен!).

Я не понимаю что делает top left / 50% 6%.

top Это установка свойства background-position-x которое указывает начало отрисвоки фона относительно оси X, right это свойство background-position-y соотвественно работает аналогично, но по оси Y

50% 6% это css свойство background-size, отвечает за размер фона, первое значение это ширина, а второе высота

Пример

Пока готовил ответ, накидал вам простенький пример для понимания работы свойства background-position

function changeBgPos(y, x) {
  document.body.style.backgroundPositionX = x;
  document.body.style.backgroundPositionY = y;
}

html,
body,
.block {
  height: 100%;
}

.block {
  display: flex;
  align-items: center;
  justify-content: space-evenly;
}

body {
  background: url("https://i.imgur.com/pAG5V38.jpg") top left / 15% 25%;
  background-repeat: no-repeat;
  margin: 0;
}

<div class="block">
  <input value="top left" onclick="changeBgPos('top','left')" type="button">
  <input value="top right" onclick="changeBgPos('top','right')" type="button">
  <input value="bottom left" onclick="changeBgPos('bottom','left')" type="button">
  <input value="bottom right" onclick="changeBgPos('bottom','right')" type="button">
</div>

Совет

Для работы с такими сокращающими свойствами советую использовать Dev Tools в вашем браузере, кликнув по такому свойству вы увидите все его содержимое в удобном формате!