Angular dynamic background images
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
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>
<div id="component-id" [style.background-image]="'url(www.domain.com/path/'+bgImageVariable+')'"> <!-- ... --></div>or
<div id="component-id" [style.background-image]="'url('+bgImageVariable+')'"> <!-- ... --></div>you can use in second way by adding URL path in a single variable.for example
bgImageVariable="www.domain.com/path/img.jpg";