I got a `background-image` of a `<section>` in place and would like to have a `background-color` set up through it in order to give the image the dimmed effect. It isn't possible to use `opacity`as the effect will be extended to the children elements I have (a header in this case). I've used `rgba(0,0,0,.5)` on my section, but looks like the background-color can just appear behind the background-image. 

Any ideas on how to make it cover the whole section while still behind the children elements?

```css
body {
  width: 100%;
}
/*Header*/

#header {
  width: 100%;
  background: url(../_img/new_background.jpg) no-repeat center center rgba(0, 0, 0, .5);
  background-size: cover;
  display: -webkit-flex;
  /*For Safari 7 and 8*/
  display: flex;
  -webkit-flex-direction: column;
  flex-direction: column;
  -webkit-justify-content: center;
  justify-content: center;
}
header {
  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: column;
  flex-direction: column;
  -webkit-justify-content: center;
  justify-content: space-between;
}
header h1,
header p:last-of-type {
  font-family: "Proxima Nova Extrabold";
  color: white;
  text-transform: uppercase;
  font-size: 3.75em;
  text-align: center;
}
h1 + p {
  font-family: "Palatino";
  color: white;
  font-size: 2.5em;
  text-align: center;
}
```

```html
<!-- Header -->
<section id="header">
  <header>
    <h1>Example</h1>
    <p>Example</p>
    <p>Example</p>
  </header>
</section>
```