Ionic 4 : Cannot Set Background Image

Ionic Framework
1

Hello there,

I am trying to change the background image of ion-content but cannot make it work.
I did:

ion-content {
	background-image: url('/assets/app_images/image.png') !important;
}

The above somehow works ONLY IF I UNCHECK the styling of :host using Google Chrome’s console.
There is always a layer that has a white background in front of the ion-content, that is why the background image does not show and the only thing I can see is the white background of :host.

So I tried:

.inner-scroll {
	background-image: url('/assets/app_images/school.png') !important;
}

and

.scroll-y {
	background-image: url('/assets/app_images/school.png') !important;
}

but the result is still the same…

Before unchecking the background of :host

background
background286×504 2.03 KB

I found out that its there after unchecking the background of :host

background5
background5788×477 43.6 KB

background1

background3

I also added encapsulation:

ViewEncapsulation.None

on my component but it doesn’t seem to help. No effect at all.

How can I make the background show?

I have developed mobile apps using Ionic 3 with so much ease but its pain using Ionic 4.
I actually wasted 7 hours of searching on forums as well as trial and error with no success for just a simple background image. :tired_face: TIA. :slight_smile:

2

One of the changes in Ionic 4 is the use of CSS Variables. Some items are now only touchable via this method. Setting the background on the ion-content is one example.

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

The CSS Properties are listed in the documentation for each component.

3

Thanks @ChrisGriiffith for your reply. I already tried that when I learned on a thread not sure if its in Github but it doesnt work both in home.page.scss and global.scss :frowning:

4

Hi @ChrisGriiffith, its weird. I modified the code and it still doesnt work. I added _ngcontent-c0 on ion-content then it worked. I removed _ngcontent-c0 and its still working. :thinking: Its working fine now. Thanks for the help.