How to change the background color of a single page in ionic 3+

Question

I am new to ionic and i have been trying to change a single page css like changing the background color to be something else. like green or so. i am aware i can change the same globally and i don't want to change the background color globally i want it to be only on this single page.

I have tried the below but it seems not working.

I have tried searching but i am not finding anything fitting my need

//page source code

<ion-content class="contents">
     sample text goes here 
</ion-content>

.contents{
  background-color:red;
}
ion-content{
  --background-color: var(--ion-color-danger, #f1453d);
}

the background should give me a red color for that page but it's not effecting the change

Answer 1

In ionic v6 Beta1 this worked for me:

ion-content {
  --ion-background-color: red;
}

Answer 2

Try this.

.contents {
  background: #f1453d;
}

Answer 3

you have to try this code on page.scss

ion-content {background: #f1453d !important; }

Answer 4

I faced this problem and tried ALL solutions mentioned here, and finally solved it by this:

<ion-content style="--background: #f1453d;">