как отлаживать?

код покажи

.headers:before {
   position: absolute;
   width: 2018px;
   height: 1052px;
   left: calc(50% - 2018px/2 + 1997px);
   top: -100px;
   background: linear-gradient(270deg, rgba(0, 0, 0, 0.25) 2.78%, rgba(0, 0, 0, 0) 50%), url(images/background.jpg);
   filter: blur(30px);
   transform: matrix(-1, 0, 0, 1, 0, 0);
}

.headers {
   position: absolute;
   width: 658px;
   height: 841px;
   left: calc(50% - 658px/2 + 337px);
   bottom: 0px;
   content: url(images/image_person.png);
}

а в html просто один div с классом headers

before пишется через ::

content для before

.headers::before

и свойство content: '';

.headers::before {
   content: '';
   display: block;
   position: absolute;
   width: 2018px;
   height: 1052px;
   left: calc(50% - 2018px/2 + 1997px);
   top: -100px;
   background: linear-gradient(270deg, rgba(0, 0, 0, 0.25) 2.78%, rgba(0, 0, 0, 0) 50%), url(images/background.jpg);
   filter: blur(30px);
   transform: matrix(-1, 0, 0, 1, 0, 0);
}

нет, если только ты через тег img сделал бг

не получается

залей в песочницу

вангую, тамушт позишн абсолют у обоих

а ты не перепутал стили от headers и before ?

зачем там content с картинкой ?

нужно чтобы фон не переходил на картинку, в итоге только картинку видно, бефоре не работает

залей проект в песочницу

зачем контент хедерсу и где контент у бефор?

кто подскажет, каким способом можно разместить стрелку по под элементами что бы она всегда была по центре вместе с кнопокой и на том же уровне по высоте?

parent pos: rel
arrow pos: abs