[Решено] Градиент поверх изображения

Доброго времени суток. Уважаемые форумчане, помогите с решением проблемы: в хедере необходимо сделать фон картинкой, а поверх него наложить полупрозрачный градиент. Нашел следующее решение:
<div id="mask"></div>
#mask {
background: url(demo.png) no-repeat 0 0 transparent;
height: 37px;
overflow: hidden;
position: relative;
width: 95px;
}

#mask::after {
background: transparent;
background: -moz-linear-gradient(top, rgba(255, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0.1) 100%);
background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(255, 0, 0, 0.8)), color-stop(100%, rgba(0, 0, 0, 0.1)));
background: -webkit-linear-gradient(top, rgba(255, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0.1) 100%);
background: -o-linear-gradient(top, rgba(255, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0.1) 100%);
background: -ms-linear-gradient(top, rgba(255, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0.1) 100%);
background: linear-gradient(to bottom, rgba(255, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0.1) 100%);
content: "";
display: block;
height: 100%;
left: 0;
position: absolute;
top: 0;
width: 100%;
}

Для его реализации приходится в хедер прописывать див. Если прописывать тоже самое для хедера - не работает. Если оставить все как есть, то не вижу возможности поместить на хедер навигацию, логотип и т.д.
Если в разметке сделать следующим образом:
<header>
<div class="bg_header"></div>
<nav>
<ul>
<li><a href="#">Пункт1</a></li>
<li><a href="#">Пункт2</a></li>
<li><a href="#">Пункт3</a></li>
<li><a href="#">Пункт4</a></li>
<li><a href="#">Пункт5</a></li>
</ul>
</nav>
</header>
То соответственно нав находится под дивом, что не совсем приемлимо. Как реализовать данную задачу?

 

Почему не работает? Как вы прописываете?
У тега header есть свой класс или ид?

 

Нет, без класса и ид:

<header>
<nav>
<ul>
<li><a href="#">Пункт1</a></li>
<li><a href="#">Пункт2</a></li>
<li><a href="#">Пункт3</a></li>
<li><a href="#">Пункт4</a></li>
<li><a href="#">Пункт5</a></li>
</ul>
</nav>
</header>

header {
background: url(demo.png) no-repeat 0 0 transparent;
height: 37px;
overflow: hidden;
position: relative;
width: 95px;
}

header::after {
background: transparent;
background: -moz-linear-gradient(top, rgba(255, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0.1) 100%);
background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(255, 0, 0, 0.8)), color-stop(100%, rgba(0, 0, 0, 0.1)));
background: -webkit-linear-gradient(top, rgba(255, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0.1) 100%);
background: -o-linear-gradient(top, rgba(255, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0.1) 100%);
background: -ms-linear-gradient(top, rgba(255, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0.1) 100%);
background: linear-gradient(to bottom, rgba(255, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0.1) 100%);
content: "";
display: block;
height: 100%;
left: 0;
position: absolute;
top: 0;
width: 100%;
}

 

Вопрос решен.