title: transparent overlay background image CSS
body: <p>I Have a background image full screen, but i want  a black overlay on it with a opacity of 0.7</p>
  
  <p>This is my code:</p>
  
  <pre><code>body { 
    background:url(../images/bg.jpg) no-repeat center center fixed; 
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;}
  </code></pre>
  
  <p>How do i do this?</p>
  
  <p>My html </p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;!--[if lt IE 7 ]&gt;&lt;html class="ie ie6" lang="en"&gt; &lt;![endif]--&gt;
  &lt;!--[if IE 7 ]&gt;&lt;html class="ie ie7" lang="en"&gt; &lt;![endif]--&gt;
  &lt;!--[if IE 8 ]&gt;&lt;html class="ie ie8" lang="en"&gt; &lt;![endif]--&gt;
  &lt;!--[if (gte IE 9)|!(IE)]&gt;&lt;!--&gt;&lt;html lang="en"&gt; &lt;!--&lt;![endif]--&gt;
  &lt;head&gt;
  
      &lt;!-- Basic Page Needs
    ================================================== --&gt;
      &lt;meta charset="utf-8"&gt;
      &lt;title&gt;New Year Countdown&lt;/title&gt;
      &lt;meta name="description" content=""&gt;
      &lt;meta name="author" content=""&gt;
  
      &lt;!-- Mobile Specific Metas
    ================================================== --&gt;
      &lt;meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"&gt;
  
      &lt;!-- CSS
    ================================================== --&gt;
      &lt;link rel="stylesheet" href="css/style.css"&gt;
  
  
      &lt;!-- Favicon
      ================================================== --&gt;
      &lt;link rel="shortcut icon" href="images/favicon.ico"&gt;
  
  
  &lt;/head&gt;
  &lt;body&gt;
  
  
  &lt;div id="over"&gt;k&lt;/div&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>The over has to be an opacity overlay.</p>