title: Combine linear-gradient with dynamic background-image
body: <p>I'm trying to achieve color overlay on background images <a href="https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_hero_image" rel="nofollow noreferrer">as demonstrated at w3school</a>, but I want to do it for a dynamically set background-image (I'm currently working with VueJS). </p>
  
  <h2>What I try to achieve:</h2>
  
  <pre class="lang-html prettyprint-override"><code>&lt;div class="hero-image"&gt;...&lt;/div&gt;
  </code></pre>
  
  <pre class="lang-css prettyprint-override"><code>.hero-image {
      background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('image.png');
      background-size: cover;
  }
  </code></pre>
  
  <h2>First attempt - extract <em>background-image</em> to html:</h2>
  
  <p><strong>Problem:</strong> This will override the color information and only use the <em>background-image</em> settings. I also tried with <em>background</em> attribute instead of <em>background-color</em> in the css code.</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;div class="hero-image" :style="{ backgroundImage: `url('${image}')`}"&gt;...&lt;/div&gt;
  </code></pre>
  
  <pre class="lang-css prettyprint-override"><code>.hero-image {
      background-color: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5));
      background-size: cover;
  }
  </code></pre>
  
  <h2>Second attempt - extract the complete <em>background</em> attribute:</h2>
  
  <p><strong>Problem:</strong> This works except the <em>background-size</em> attribute is now ignored. I tried to add <em>cover</em> to the <em>background</em>-attribute in the html but it does not work either.</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;div class="hero-image" :style="{ 
    background: `linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('${image}')`
  }"&gt;...&lt;/div&gt;
  </code></pre>
  
  <pre class="lang-css prettyprint-override"><code>.hero-image {
      background-size: cover;
  }
  </code></pre>