ionic 4: changing ion-content background does not work

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

I solved the problem doing the following:

ion-content {    --background: none;    background-image: url('/assets/imgs/page_bg.jpg');    background-position: center top;    background-repeat: no-repeat;    background-size: cover;}

This will disabled background and then set the correct one.

I have encountered the similar situation, having ionic background css property leads to flickering issues on IOS

try the following if you have encountered flickering issue

:host {  ion-content {    --background:none;    background:url(''../../assets/images/cover.jpg');    background-size: cover;    background-position: center center;  }}

for anyone having keyboard issues (background resizes on keyboard show) install Keyboard plugin

https://ionicframework.com/docs/native/keyboard/

and add the following code on your config.json

<preference name="keyboardResize" value="false" /><preference name="keyboardResizeMode" value="native" />

Note: this may hide item beneath the keyboard when its shown (I have tested only on iOS)