Ionic 4 : Cannot Set Background Image

@junjunhernandez wrote:

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.png286×504 2.03 KB

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

background5.png788×477 43.6 KB

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. TIA.