Search code examples
angularionic-frameworksassionic4

Ionic Multiple and dynamic images on background

I have been trying to add multiple images, already post a question but with different issue but have end point was same.

<ion-content [style.background-image]="'url(https://restcountries.eu/data/ala.svg)', 'url(https://restcountries.eu/data/ala.svg)'"
             [style.background-size]="'100% 50%, 100% 50%'" 
             [style.background-repeat]="'no-repeat, repeat'">

For multiple images it isn't showing but for one image its displaying as expected

<ion-content [style.background-image]="'url('+ fromFlag +')'"
             [style.background-size]="'100% 50%, 100% 50%'" 
             [style.background-repeat]="'no-repeat, repeat'">

Can anyone help me how to add second image on background?

Solution

  • You can use this solution for dynamic add multiple images on the background.

    [ngStyle]="{'background-image': 'url(' + fromFlag + '),url(' + fromFlag + ')'}" 

    <ion-content 
    [ngStyle]="{'background-image': 'url(' + fromFlag + '),url(' + fromFlag + ')'}"
    [style.background-size]="'100% 50%, 100% 50%'" 
    [style.background-repeat]="'no-repeat, repeat'"
>