Ionic 4, dynamic background images

Ionic Framework
1

I have been trying to add multiple background images in ionic 4 project. For static images i have creates the styles but for dynamic images is giving error in styles.

     <ion-content style = "--background: url('https://restcountries.eu/data/pak.svg') 0 0/100% 50% no-repeat, 
                                   url('https://restcountries.eu/data/pak.svg') 0 100%/100% 50% no-repeat">  

                               ...............Some Code........................... 

        </ion-content>

Currently its giving me 2 images on background. For dynamic i’m trying:

<ion-content style = "--background: url('{{flag1}}') 0 0/100% 50% no-repeat, 
                                   url('{{flag2}}') 0 100%/100% 50% no-repeat">  

                               ...............Some Code........................... 

        </ion-content>

But images are not being displayed. Can anybody help me in doing this. Thank you

2

I’m not sure about setting CSS Variables that way you tried, so all i can do can tel you how i would solve it. I would create the Images as Html Images (<img>) and set the source to whatever you want. Propably you can wrap the two Images into divs and allign them the way you want.

3

I am setting my background image, using <img /> isn’t working as a background image.

4

but it can work like this. You can apply CSS Styles to make the Images be below everything else?

5

Never tried, but I think that for dynamic data you need to use ngStyle.
https://angular.io/api/common/NgStyle

6

I think you’re going to have to involve the DOMSanitizer here, and if you do decide to go down that road, read all the security concerns carefully, and if they sound scary, good. They’re supposed to.

7

I have done some thing but its showing 1 image now:

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

In this one image is working, and multiple size and repeat are also working but when i add multiple images

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

In this case only size and repeat are working and images are not working.