How to overlay image with color in CSS?

Question

Objective

I want a color overlay on this header element. How can I do this with CSS?

Code

HTML

<header id="header">
    <div class="row">
        <div class="col-xs-12">
            ...
        </div>
    </div>
</header>

CSS

#header {
    background: url(../img/bg.jpg) 0 0 no-repeat fixed;
    height: 100%;
    overflow: hidden;
    color: #FFFFFF
 }

Answer 1

You should use rgba for overlaying your element with photos.rgba is a way to declare a color in CSS that includes alpha transparency support. you can use .row as an overlayer like this:

#header {
    background: url(../img/bg.jpg) 0 0 no-repeat fixed;
    height: 100%;
    overflow: hidden;
    color: #FFFFFF
 }

.row{
    background: rgba(39,62,84,0.82);
    overflow: hidden;
    height: 100%;
    z-index: 2;
}