title: Black CSS image overlay is white
body: <p>I am trying to create a black overlay over a header image and it seems to turn out white instead even though I'm setting the color property to black.</p>
  
  <pre><code>&lt;div id="overlay"&gt;
  &lt;header class="intro-header" style="background-image: url('http://localhost/WP/wp-content/uploads/2015/01/cropped-Skov.jpg')"&gt;
      &lt;div class="container"&gt;
          &lt;div class="row"&gt;
              &lt;div class="col-lg-8 col-lg-offset-2 col-md-10 col-md-offset-1"&gt;
                  &lt;div class="site-heading"&gt;
                      &lt;h1&gt;Svampe ting&lt;/h1&gt;
                      &lt;hr class="small"&gt;
                                              &lt;span class="subheading"&gt;Posted by krillebimbim on January 30th, 2015&lt;/span&gt;
                      &lt;div id="avatar" class="row text-center"&gt;&lt;img alt='' src='http://1.gravatar.com/avatar/d1f1634ce363d7dd8a0ca1522270c858?s=92&amp;amp;d=http%3A%2F%2F1.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D92&amp;amp;r=G' class='avatar avatar-92 photo' height='92' width='92' /&gt; &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/header&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>My CSS for the overlay:</p>
  
  <pre><code>#overlay{
  position:relative;
  top:0;
  left:0;
  width:100%;
  height:100%;
  color:#000000;
  opacity:0.6;
  }
  </code></pre>
  
  <p>And the header styling:</p>
  
  <pre><code>.intro-header {
    background: no-repeat center center;
    background-attachment: scroll;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    background-size: cover;
    -o-background-size: cover;
   }
  </code></pre>