title: HTML does not overtake background image
body: <p>I want to change the background of a Website from a normal color to a picture.
  The CSS-Code:</p>
  
  <pre><code>.bg {
      opacity: 5;
      background-repeat: no-repeat;
      background-size: cover;
      background-position: 50% 100%;
      background-image: url('../../assets/pics/bg.jpg');
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      width: 100%;
      height: 100%;
      z-index: 5;
  } 
  </code></pre>
  
  <p>If I write </p>
  
  <pre><code>&lt;body class="bg"&gt;
  </code></pre>
  
  <p>in the HTML File, the Website is white. (If I add blur Effects, they will shown over all other elements). If I do</p>
  
  <pre><code>&lt;img id="logo" src="path to img"&gt;
  </code></pre>
  
  <p>It works but I want it with CSS because its smarter :D
  The image is here: (from the CSS-File)</p>
  
  <pre><code>../../assets/pics/bg.jpg
  </code></pre>
  
  <p>And I dont get any Errors in Chrome (in Developer tools)</p>
  
  <p>Can u help me?</p>
  
  <p>(If it helps, i want to edit the page "mcggehrden.de/idesk/v3" and want to set a a custom background)</p>