Set gradient background in ionic 4

Question

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.

Answer 1

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

Answer 2

Try like this...

login.page.html

<ion-content padding>
  <div class="bg-class">
    <p>lorem</p>
  </div>
</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;
 }