Как правильно использовать прозрачность(opacity в background-image)?

Столкнулся с такой проблемой есть 2 изображения которые подгружаются через (background-image ( для масштабирования и центрирования) на этом изображении есть еще текст но проблема в том что если использовать просто opacity то все наследуют прозрачность, если же использовать background-color:rgba(36, 54, 60, 0.5); то не работает, так как background-image перекрывает новый слой как я понял (ибо при обновлении страницы мелькает сначала цвет, а после ложится фото).
Вот краткий код который я сделал.
https://jsfiddle.net/my_kachanov/8w96239o/1/