Как сделать градиент поверх картинки?

linear-gradient - это изображение, поэтому изображения (фон и градиент) надо прописывать через запятую

.header {
    height: 670px;
    width: 100%;
    background-image: linear-gradient(to right, rgba(9, 5, 47, .85) 0%, rgba(49, 29, 94, .85) 100%), url(../img/header_bg.png);
}

Далее, если я правильно понял про вопрос суть с текстом, то:

Создаете блок и присваиваете ему такой класс, заполняя текстом, пример:

<div class="header">
 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris enim enim, semper sed libero placerat, venenatis eleifend velit. Aliquam imperdiet nunc in libero condimentum viverra. Quisque eu est et mauris pellentesque vulputate. Curabitur posuere sollicitudin urna id malesuada. Vivamus tincidunt tristique diam, id porttitor neque tempor at. Quisque eget enim in tortor scelerisque vehicula vel eget justo. Nunc rutrum iaculis tortor at porttitor.
</div>

Пример на JSFiddle.

Абсолютами:

.header { 
    height: 670px; 
    width: 100%; 
    background: url(https://upload.wikimedia.org/wikipedia/commons/b/bf/Blue_Tiger_Im_IMG_9450.jpg) center no-repeat; 
    -webkit-background-size: cover; 
    background-size: cover; 
    position: relative; 
    z-index: 1; 
} 
 
.header:after { 
  content: ''; 
  position: absolute; 
  top: 0; 
  left: 0; 
  bottom: 0; 
  right: 0; 
  z-index: 2; 
  background: linear-gradient(to right, rgba(9, 5, 47, .85) 0%, rgba(49, 29, 94, .85) 100%); 
} 
 
.text { 
  position: absolute; 
  top: 0; 
  left: 0; 
  bottom: 0; 
  right: 0; 
  z-index: 3; 
  text-align: center; 
} 
 
.text p { 
  color: #fff; 
  font-size: 2rem; 
}

<div class="header"> 
  <div  class="text"> 
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sequi, eos?</p> 
  </div>   
</div>

P.S: Ваш пример не работает из-за конфликта фонов.