How to not to repeat background specs with multiple responsive backgrounds

here's the current code:

.description-1-section{
  background: linear-gradient(0deg, #464646 30.75%, rgba(51, 51, 51, 0) 100%), url('../images/fondo-1-s.jpg');
  background-repeat: no-repeat;
  background-size: cover;
  color: $white;

  @include mq($medium-up){
    background: linear-gradient(0deg, #464646 30.75%, rgba(51, 51, 51, 0) 100%), url('../images/fondo-1-m.jpg');
    background-repeat: no-repeat;
    background-size: cover;
  }

  @include mq($medium-aux-up){
    background: linear-gradient(0deg, #464646 30.75%, rgba(51, 51, 51, 0) 100%), url('../images/fondo-1.jpg');
    background-repeat: no-repeat;
    background-size: cover;
  }
}

I've found out that is using multiple bgs (in this case a gradient + an image), when updating some value for breakpoints purposes, it seems I must repeat the accessory directives (background-repeat: no-repeat; background-size: cover;).

Is there a way to avoid such repetions in this use case?

Solution

Using the shorthand background resets the implicit properties not listed separately.

The background shorthand CSS property sets all background style properties at once, such as color, image, origin and size, or repeat method.

^MDN

I'd recommend using simply background-image instead

background-image: 
  linear-gradient(0deg, #464646 30.75%, rgba(51, 51, 51, 0) 100%),
  url('../images/fondo-1-s.jpg');