I am trying to add gradient background only for a few pages,
login.page.html
<ion-header>
</ion-header>
<ion-content padding class="bg-class">
<p>lorem</p>
</ion-content>
_login.page.css
.bg-class{
background-image: linear-gradient(197deg, rgba(100,100,100,1) 0%, rgba(63,63,63,1) 13.5%, rgba(29,29,29,1) 33.33%, rgba(0,0,0,1) 100%) !important
}
This is not working, can i know where I am going wrong? Is there anything else i need to be doing to get this one to work.
In ionic 4, you need to use CSS variables to theme the ion-content
.
Simply change your CSS rule as follows:
.bg-class{
--background: linear-gradient(197deg, rgba(100,100,100,1) 0%, rgba(63,63,63,1) 13.5%, rgba(29,29,29,1) 33.33%, rgba(0,0,0,1) 100%) !important;
}
Here is the theming guide
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With