Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Set gradient background in ionic 4

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.

like image 631
akshay ramesh Avatar asked Nov 04 '18 16:11

akshay ramesh


1 Answers

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

like image 90
user184994 Avatar answered Nov 09 '22 07:11

user184994