Dvorak

Фон - одна картинка, человек - другая. Определяем размер человека и размер шлема. На соответствующей ширине проводим линию, при этом у неё z-index меньше, чем z-index картинки человека

Можно ещё через canvas попробовать, но там сложнее

Попробуйте canvas. Там как раз есть возможности для рисования геометрических фигур

Возможно, надо добавить position: relative; для выравниваемого блока.

Как его вообще под себя настраивать?

В данном коде есть ссылка на css-файлы bootstrap.min.css и style.css. Туда и вносите правки

var text=[];
  var tr=$('tr');
  for (var i=0; i<tr.length; i++) {
    text[i]=tr.eq(i).children().eq(0).text();
  }

  console.log(text);

background-size: cover;

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

Советую добавлять код, написанный выше, в любой CSS-документ. Все стандартные отступы и поля в документе обнуляются