1

i'm using ionic 5, i'm trying to cover the image background and make it not-repeat, so in ionic 5 i dont know if its possible

usualy i do like this:

background-image: url(assets/BGpaper-01.png);
background-repeat: no-repeat;
background-size: cover;

Using ionic they have custom css property for ionic components, for example:

ion-action-sheet, the background must be like this:

--background: url(assets/BGpaper-01.png);

for no-repeat and cover i try this:

ion-action-sheet {
--background: url(assets/BGpaper-01.png) no-repeat center center / cover;
}

but seems not work for me

Paulo Rosa
  • 356
  • 2
  • 7
  • 1
    Ionic makes have use of the shadow DOM. Have you tried appending ::ng-deep ? https://stackoverflow.com/questions/46786986/how-and-where-to-use-ng-deep – E. Maggini Jan 17 '21 at 16:33
  • try using --background:none before using the above properties – Charbelalam Jan 18 '21 at 10:57
  • for example: ion-content { --background: none; background-image: url('../images/img_name.jpg'); background-position: center top; background-repeat: no-repeat; background-size: cover; } – Charbelalam Jan 18 '21 at 11:00

1 Answers1

0
--background: url(../../../assets/images/bg.png) 0 0/100% 100% no-repeat;
Ravi Ashara
  • 1,152
  • 6
  • 12