С помощью флекса вообще возможно распологать фото с бэкраундами?

навскидку по-быстрому
как-то так?
https://jsfiddle.net/gw70yp9b/1/

sec6 section img{
    background: url(/images/157195/kvadratikshema1.png#size_98x98) center no-repeat;
    padding: 98px;
  }

тут ты задаешь бакграунд всем картинкам, а хочешь бакграунд с квадратиком только картинкам, которые внутри дива (.sec6 section div img)

Во-первых, с семантическим тэгами нужно работать иначе. В вашем случае нужно менять тег <section> на простой класс section, иначе эффект будет только хуже, не говоря уже про множество <h1>. Подробнее можно почитать тут

Во-вторых, стрелочки между элементов добавьте в псевдоэлементы, они не нужны в разметке и только путают

Не совсе понял компот с фоновой картинкой у <img>, масло масляное получается.
А вообще лучше взять bootstrap 4, и в данном случае обойтись <div> с фоновой картнкой