title: How to add transparent background image over the whole page in Angular?
body: <p>I'm trying to put the background image over the whole page. Also the background should cover the Material Data Table. 
  What is the best way to do it?
  The background should also be transparent, so that you can read the content of the table.</p>
  
  <p>Following the code of adding the background image:
  HTML:</p>
  
  <pre><code>&lt;div class="image"&gt;
    &lt;mat-toolbar color="primary"&gt;
      &lt;mat-toolbar-row&gt;
        &lt;img src="assets/{{img_source}}" alt="img_source" title="img_source" width="25%" height="100%"&gt; // not important
      &lt;/mat-toolbar-row&gt;
    &lt;/mat-toolbar&gt;
  
    &lt;app-coffee-information&gt;&lt;/app-coffee-information&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>.image {
    height: 45em;
    background-size: cover;
    width: auto;
    background-image: url('../assets/Unknown.jpg');
    background-position: 50% 50%;
  }
  </code></pre>
  
  <p><a href="https://i.stack.imgur.com/WrZZi.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/WrZZi.jpg" alt="enter image description here"></a></p>
  
  <p>When changing the height to: <code>height: 100%;</code> it looks like this:</p>
  
  <p><a href="https://i.stack.imgur.com/HdfdZ.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/HdfdZ.png" alt="enter image description here"></a></p>