CODEWITHSUNDEEP
cssipadangularstyles
Pat M
Pat M

Reputation: 6036

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.

Upvotes: 45

Views: 87622

Answers (4)

Manoj Rana
Manoj Rana

Reputation: 3440

use this and set height and width of div tag as per you need

<div id="component-id" [style.backgroundImage]="'url('+bgImageVariable+')'"></div>

Upvotes: 1

Coder Girl
Coder Girl

Reputation: 185

<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";

Upvotes: 9

St&#233;phane de Luca
St&#233;phane de Luca

Reputation: 13573

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>

Upvotes: 20

G&#252;nter Z&#246;chbauer
G&#252;nter Z&#246;chbauer

Reputation: 657118

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

Upvotes: 109

Related Questions