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
  • 606
  • 1
  • 5
  • 8
  • 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 –  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

2 Answers2

0
--background: url(../../../assets/images/bg.png) 0 0/100% 100% no-repeat;
Ravi Ashara
  • 1,177
  • 7
  • 16
0
 background: url('../../../../assets/imgs/bg2.png') no-repeat center center fixed; 
        -webkit-background-size: cover;
        -moz-background-size: cover;
        background-size:cover;
Emmanuel Iyen-Mediatrees
  • 159
  • 8