title: Background image opacity in angular2
body: <p>I'm trying to change the opacity of a background image, by setting the RGBA. However the opacity of the background image does not change. Below is the code snippet i'm using with. </p>
  
  <p>Changing the background image opacity this way works in HTML, but not when I try it with angular2.</p>
  
  <pre><code>import {Component} from 'angular2/core';
  
  @Component({
      selector: 'my-app',
      styles: [`
  
  .background-image {
    z-index: -1;
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    background-color: rgba(0, 0, 0, 0.9);
  },
  
  `],
      template:
              `
              &lt;h1&gt;Hello Angular&lt;/h1&gt;
                &lt;div class="background-image" style="background-image : url('http://v4.pingendo.com/assets/photos/food/cover-1.jpg')"&gt;
                &lt;/div&gt;
              `,
  })
  export class AppComponent { }
  </code></pre>
  
  <p>Just wanted to say thanks to everyone for jumping in an helping to solve the problem</p>