Angular dynamic background images

In the html template I have this style with a dynamic image:

<div style="background: url('/img/{{item.img}}'); width: 200px; height: 150px"></div>

Which works in web browsers and android browser. However background images that are dynamic using "style=" are not showing on iPad.

I could always create dynamic images using the img tag but I'm looking for a style/css solution for iPad.

Solution 1:

Use instead

<div [ngStyle]="{background: 'url(/img/' + item.img + ')', width: '200px', height: '150px'"></div>

or

<div [style.background]="'url(/img/' + item.img + ')'"
    [style.width.px]="200" [style.height.px]="150p"></div>

See also In RC.1 some styles can't be added using binding syntax

Solution 2:

You should do that as the +Günter Zöchbauer second part answer generates unwanted supplementary style background-position: initial and background-size: initial on Safari at least.

Note that I only set the background-image style:

<div [style.background-image]="'url(/img/' + item.img + ')'"
 [style.width.px]="200" [style.height.px]="150p"></div>