How to add another imgae to a div without replacing the first one using Angular 2?

Question

Suppose we have already the first image.

.bg{
    background-image: url('img/bg1.png');
}

Then we wanna add another image img/bg2.png using Angular 2. How could we do that?

I tried to use

<div [style.background-image]="getBg()"></div>

while

getBg(){
    return "url('img/bg2.png')";
}

However, it will replace the bg1.png. So how could I add another background image to the div above? Thanks.

edit: I know we should use comma, but how could we get the first image using Angular 2?

Answer 1

You need to pass a comma-separated list of URLs:

getBg(){
    return "url('img/bg1.png'),url('img/bg2.png')";
}

See also Can I have multiple background images using CSS?