ionic 4: changing ion-content background does not work

Question

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

@PeterHaddad link broken – Rodney Salcedo Nov 17 '19 at 22:32 — Rodney Salcedo, Nov 17 '19 at 22:32

score 91 · Accepted Answer · answered Nov 20 '18 at 20:57

91

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

answered Nov 20 '18 at 20:57

Gary Großgarten

1,522
9
8

1

That solved my problem. But is there any solution when keyboard is pressed background image scrolls up? – rchau Feb 17 '19 at 05:20
1

@rchau Did you find a solution for when the background image scrolls up when keyboard is pressed? – Vivek Feb 21 '19 at 06:04
@Vivek No. Did you find any solution? – rchau Feb 21 '19 at 15:20
@rchau not yet. I'll let you know if I find one – Vivek Feb 21 '19 at 15:47
@vivek please find my answer below – kishorekumaru Feb 27 '19 at 03:46
It's flickering, anyone know how to fix this flickering annoying bug? – Snowbases Aug 06 '19 at 11:10

score 32 · Answer 2 · answered Mar 27 '19 at 13:10

32

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.

answered Mar 27 '19 at 13:10

GianPierre Gálvez

709
7
16

1

Cheers bud this fixed it for me too :) – Grant May 02 '19 at 02:12
1

Thanks, I was also able to do the same in a class, and then put `` – Stan Kurdziel May 14 '19 at 23:41

kishorekumaru · Answer 3 · 2019-02-27T03:45:02.307

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)

Working perfectly. Thanks for the answer. – CodeChanger Jan 12 '22 at 04:06 — CodeChanger, Jan 12 '22 at 04:06

score 0 · Answer 4 · edited Mar 18 '19 at 12:46

0

I tried answer from @rchau, but it did not work in my case. Instead, I put this code in my project and it has done the right thing:

ion-content{
    --background:url('../../assets/images/cover.jpg') 0 0/100% 100% no-repeat;
}

edited Mar 18 '19 at 12:46

Heikki

2,214
19
34

answered Mar 18 '19 at 07:47

Jaikant Chaturvedi

11
3

It is advisable to add a short explanation of your code as well. – Anurag Srivastava Mar 18 '19 at 07:55
In what manner this answer is different than that of @rchau ? – Heikki Mar 18 '19 at 08:09
@Heikki I used the top answer, but it did not work, so I put this code in my project and it has done the right thing, so I posted it to help others – Jaikant Chaturvedi Mar 18 '19 at 11:46
@AnuragSrivastava ohk sure – Jaikant Chaturvedi Mar 18 '19 at 11:48

Sampath · Answer 5 · 2022-02-14T17:57:48.853

0

This is the working solution for me.

global.scss

ion-content {
    --background: url('../assets/img/background/background.png') no-repeat 100% 100%;
}

edited Feb 14 '22 at 17:57

answered May 03 '19 at 20:14

Sampath

63,341
64
307
441

ionic 4: changing ion-content background does not work

5 Answers5

Linked