title: Section background image and linear gradient not working
body: <p>I am trying to add a background image with a linear gradient.</p>
  
  <p>If I add the image without the linear gradient, the image appears. As soon as I add the linear gradient, neither of them work and it defaults back to the original background color in the section.</p>
  
  <p>In the CSS below I have tried to combine the background image into one CSS declaration and divide it by a comma.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.education {
    background: linear-gradient(rgba(141, 153, 174, 0.8), (rgba(141, 153, 174, 0.5)), url("samuel-beckett-bridge.jpg") no-repeat fixed);
    background-size: cover;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!-- // Education --&gt;
  &lt;section id="education" class="education"&gt;
    &lt;div class="content-wrap"&gt;
      &lt;h2&gt;Education&lt;/h2&gt;
  
      &lt;!-- School details: copy this whole block to add more schools. --&gt;
      &lt;h3&gt;School name 2017 - present&lt;/h3&gt;
      &lt;p&gt;Designation received&lt;/p&gt;
  
      &lt;!-- Add as many paragraphs as you need. --&gt;
      &lt;p&gt;Summary.&lt;/p&gt;
      &lt;!-- End of school details. --&gt;
    &lt;/div&gt;
  &lt;/section&gt;</code></pre>
  </div>
  </div>
  </p>