ngStyle background-image

Question

I have the following problem. I have a component that has @Input string value that is a link to the image.

In my HTML file I have:

<div class="parallax" [ngStyle]="{'background-image': 'url({{parallaxImage}})'}"></div>

but it's clearly not working (there is an error and page is not rendered at all). What syntax should I use to achieve my goal? I also tried to wrap this into function:

.ts file

  getParallaxImage(){
    return "'url(" + this.parallaxImage + ")'";
  }

.html file

<div class="parallax" [ngStyle]="{'background-image': getParallaxImage()}"></div>

Now, page is rendered but background-image is not set.

Answer 1

Try this

<div class="parallax" [ngStyle]="{'background-image': 'url('+ parallaxImage+')'}"></div>

or

 getParallaxImage(){
    return "url(" + this.parallaxImage + ")";
  }

Both solutions will work now, use as per your requirements.

Answer 2

This should also work:

[style.background-image]="'url(' + parallaxImage + ')'"