title: Doing multiple backgrounds in Sass background shorthand syntax
body: <p>I'm trying to do a multiple background scenario where I have an image and then on top I have a color with an a low opacity so it shows through to the image below it.</p>
  
  <p>I know I can achieve something like this easy enough with a pseudo element, but I wanted to give the multiple background effort a shot, but I am unsure how to go about doing it using Sass shorthand <code>background</code> syntax.</p>
  
  <p>For example I have this for the image background:</p>
  
  <pre><code>background: {
      image: url('../images/hero-mobile.jpg');
      position: top center;
      size: cover;
      repeat: no-repeat;
  };
  </code></pre>
  
  <p>But now am trying to figure out how to use this syntax to add another background.</p>
  
  <p>I found <a href="https://css-tricks.com/tinted-images-multiple-backgrounds/" rel="nofollow noreferrer">this page</a> which proposed something like:</p>
  
  <pre><code>background: {
      linear-gradient(
          rgba(0, 0, 0, 0.3),
          rgba(0, 0, 0, 0.3)
      ),
      image: url('../images/hero-mobile.jpg');
      position: top center;
      size: cover;
      repeat: no-repeat;
  };
  </code></pre>
  
  <p>But I got a parse error that:</p>
  
  <blockquote>
    <p>linear-gradient must be followed by a ":"</p>
  </blockquote>
  
  <p>What way can I do this?</p>