Use background for entire screen

Ionic Framework
1

I would like to have a background image covering the entire screen, and if the page just consists of ion-content it is working fine, but when adding ion-header (and adding fullscreen to ion-content), and making the toolbar transparent, the header area will not show the background image, so I get something like this

image

Any ideas, it was working fine in Ionic-v3

2

give background image in <body></body> tag. header,content and footer r subview of body.

3

Normally there is no <body> tag in Ionic, has that changed in V4?

AH of course, you suggest I should style the body. Lets see if that works

4

This is not as easy as it seems

I can add an image to the background of the body-tag in global.scss, but that would affect alle pages, and I only need to do it on a few pages, and the background ion-content also need to be transparent.

I have tried to declare the background-image in the scss for the specific page, but that seems without any effect.

So what do I have to do to apply the style change only on a specific page? My guess is that the body-element is not rendered again, so I might have to use code to change the background, and I even tried it on the element ion-app but that had the same result

5

no worries. try this in global.scss

app-pagename{
  background-color: red !important;
}

it will change background only on that page.

6

Still need to make ion-content transparent.

I ended up with this i the pagespecific scss-file

:host {
background: url(‘…/…/assets/imgs/Authentication.png’) no-repeat center center fixed;
background-size: cover;

ion-toolbar {
–opacity: 0.0;
}

ion-content {
background: transparent !important
}
}