ionic 4: changing ion-content background does not work

css angular typescript ionic-framework ionic4
Vik picture Vik · Nov 20, 2018 · Viewed 30.6k times · Source

i have tried in global.scss as 

ion-content{
    background-image: url('assets/images/cover.jpg');
    -webkit-background-image: url('assets/images/cover.jpg');
    background-repeat: no-repeat;
    background-size:cover;
  }

but this does not render the image. tried path as ./assets/images/cover.jpg as well.

if i put the same image as img tag on the page that shows up ruling out invalid image possibility.

I also tried to put in the homeage.scss as

.myview {
    background-image: url('../../assets/images/cover.jpg');
    background-repeat: no-repeat;
    background-size:cover;
}

and using class="myview" in home.html no luck

Answer

Gary Großgarten picture Gary Großgarten · Nov 20, 2018

You can use the CSS-Variable --background to change the background of ion-content.

Example:

ion-content{
    --background: #fff url('../../assets/images/cover.jpg') no-repeat center center / cover;
}

Put this into your components, pages or global scss.

For reference see: https://beta.ionicframework.com/docs/api/content#css-custom-properties

Related questions

How to get on scroll events?

I need to get scroll events from a div with overflow: scroll in my Angular 2 app. It seems onscroll event do not works on Angular 2. How could I achieve that?

Read More
Styling mat-select in Angular Material

How to style mat-select's panel component. From the docs I get that I need to provide panelClass so I make it like this: <mat-form-field> <mat-select placeholder="Search for" [(ngModel)]="searchClassVal" panelClass="my-select-panel-class" (change)="onSearchClassSelect($event)"> <…

Read More
Generate dynamic css based on variables angular

I am working on a admin panel developed with angular 4 and trying to integrate a sections to customize styling like change color, bg etc. I already have developed a sections to save settings in database got them on app load …

Read More