Почему я не могу наложить картинку на slick — slider?
Так: https://jsfiddle.net/6qxkor0b/

Если вы инициализируете слик на .slider, то слайдами становятся его дочерние элементы, т.е. header-slider будет первым кадром, а slider-bg вторым.
Нужно разобраться со структурой. 

Есть еще вопросы по коду:

1. Если какая-то картинка -bg, то почему она контентный img, а не фон в css?
И почему у фона z-index больше чем у всего остального. 
Поправить бы логику. 

2. Зачем картинкам в слайдере абсолют?

Оформите песочницу с видимой проблемой, чтобы было понятно что на самом деле происходит у вас в коде, а не предположения.
Сделал так, добился нужно мне результата.

<div class="slider">
            <div class="header-slider">
                <img src="/img/slider/header-1.png" width="1920" height="960px" alt="">
                <img src="/img/slider/header-2.jpg" width="1920" height="960px" alt="">
                <img src="/img/slider/header-1.png" width="1920" height="960px" alt="">
            </div>
            <div class="header-slider-effect">
                
            </div>
.slider {
    position: relative;
}

.header-slider img {
    position: relative;
}

.header-slider-effect {
    background: url(/img/header-bg.png);
    height: 969px;
    bottom: 0px;
    width: 1920px;
    position: absolute;
}
$(document).ready(function() {
    $('.header-slider').slick();
});