Set background image for Application - Ionic 4

Question

I want o set background image for Ionic 4 Application (all page). This was pretty straight forward when using Ionic 3 but the same approach didn't worked here. I read the theming of Ionic 4 but I couldn't find a way to set an image as background.

As given in the document, background colour can be set and it worked.

:root {
    --ion-background-color: 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;
}

But on setting the image as background, it didn't responds,

:root {
    --background: url('assets/imgs/appBg.png') no-repeat fixed center; 
}

Like to know what is the possible way to set image background in Ionic 4. Thanks.

Possible duplicate of [ionic 4: changing ion-content background does not work](https://stackoverflow.com/questions/53399998/ionic-4-changing-ion-content-background-does-not-work) — Jaykant, Feb 21 '19 at 12:48

score 1 · Answer 1 · answered Jul 21 '19 at 09:27

1

Set background image ionic 4:

ion-content {
  --background: url(../../assets/bg.jpg) no-repeat center/cover fixed;
}

Ref. Url

answered Jul 21 '19 at 09:27

Alam

303
1
3
14

score 0 · Answer 2 · answered Feb 18 '19 at 09:21

0

Use ion-content instead :root.

As:

ion-content{
  --background: url(https://i.stack.imgur.com/mSXoO.png)!important;
  --background-repeat: no-repeat;
  --background-size:100% 100%;
}

See working code

answered Feb 18 '19 at 09:21

לבני מלכה

15,925
2
23
47

Thanks. This works when used as it is. I tried to replace the image src with local image. It didn't work also it did not gave any error. < . .ion-content{ --background: url(../../assets/imgs/appBg.png)!important; --background-repeat: no-repeat; --background-size:100% 100%; } > – Joseph Feb 18 '19 at 09:58
use `url(assets/imgs/appBg.png)` – לבני מלכה Feb 18 '19 at 10:10
url(assets/imgs/appBg.png) gave compile error. And using url(../../assets/imgs/appBg.png) compiled successfully and I can see the style active in ion-content on inspecting. But it is not reflecting in screen. – Joseph Feb 18 '19 at 10:28

score -1 · Accepted Answer · answered Feb 21 '19 at 10:15

To set a background of the App, the path app the image needs to be given as in the hosted environment.

ion-content{
    --background: url(http://10.100.176.52:8100/appBg.png) !important;
    --background-repeat: no-repeat;
  }

This will set the image as background for the complete Application.

Set background image for Application - Ionic 4

3 Answers3