Не удается установить фоновое изображение (с градиентом) в Angular 9

Как указано в заголовке, я не могу установить это фоновое изображение. Я пробовал несколько способов. В настоящее время у меня есть это в моем коде:

export class HeroComponent implements OnInit {
  @Input() content: PageContent[];

  public backgroundImage: string;

  constructor() { }

  ngOnInit(): void {
    this.getComponent()
  }

  private getComponent(): void {
    this.content.forEach((component: PageContent) => {
      if (component.type !== 'hero') return;
      let url = component.fields.backgroundImage.fields.file.url;
      this.backgroundImage = `linear-gradient(to bottom, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('${url}');`;
      console.log(component.fields.backgroundImage.fields)
      console.log(this.backgroundImage);
    })
  }
}

console.log возвращает следующее:

linear-gradient (вниз, rgba (0, 0, 0, 0,5), rgba (0, 0, 0, 0,5)), url ('// images.ctfassets.net/90y01jqko4hp/15dPFmnMsX64iOL15WJIVR/457c906c79652365ff749ea2d5dault11856/ .jpg ');

какой правильный. И мой html пытается это сделать:

<div class="jumbotron" [ngStyle]="{ 'background-image': backgroundImage }" *ngIf="backgroundImage">

Элемент визуализирован, поэтому есть фоновое изображение, но оно не работает. Также я пробовал:

<div class="jumbotron" [style.background]="backgroundImage" *ngIf="backgroundImage">

Дело в том, что если я скопирую строку и вставлю ее в свой css следующим образом:

.jumbotron {
    background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('//images.ctfassets.net/90y01jqko4hp/15dPFmnMsX64iOL15WJIVR/457c906c79652365ff749ea2d5d11856/default-bg.jpg');
}

это работает без каких-либо проблем. Кто-нибудь знает, что я делаю не так?