Doing multiple backgrounds in Sass background shorthand syntax

Question

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.

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 background syntax.

For example I have this for the image background:

background: {
    image: url('../images/hero-mobile.jpg');
    position: top center;
    size: cover;
    repeat: no-repeat;
};

But now am trying to figure out how to use this syntax to add another background.

I found this page which proposed something like:

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;
};

But I got a parse error that:

linear-gradient must be followed by a ":"

What way can I do this?

Answer 1

linear-gradient is not a short hand property of background. image, position, size, etc., are shorthand's.

You need to place linear-gradient as a property to the image.

background: {     
    image: linear-gradient(
      rgba(255, 0, 0, 0.45), 
      rgba(255, 0, 0, 0.45)
    ),
    url('../images/hero-mobile.jpg');;
    position: top center;
    size: cover;
    repeat: no-repeat;
  }