Ionic full screen background image - css

Question

I am new to the Ionic framework and I am trying to start the app with a full screen background image like this:
I did manage to remove the statusbar it was shown in the tutorial. But how do I add a full screen image? When I added this to the style.css it didn't react:
html, body{
background-image: black;
}

Answer 1

In your css, try:
.scroll-content {
background: url(image) [add image position info here];
[add any more properties here]
}
This will set the background for the full content area.

Answer 2

in
ion-view class="pane"
all the stuff is rendered ... i did not try it out but i think you can manage this with
.pane {
background: url(image) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
background-size: cover;
}

Answer 3

Make sure the start of your image path has "../" this will point it to the correct image path in your resource folder once the app is built for a device. Using the pane method only seemed to cause problems this was the best solution for me when the image was appearing when served but not on my android device.
.scroll-content{
background: url("../media/images/background.jpg") no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
background-size: cover;
}

Answer 4

Very similar to answer from Helmut, which worked using 'ionic serve' but gave me a white background when I pushed to Android (4.2.2 on a Nexus 7 in my case).
The pane class selector is correct if you wish to make the background fullscreen, however android just seemed to make the background white if I set the "background" value at all. Using "background-image" put things right.
I found the following worked on Android, and in Chrome (while web testing).
.pane {
background-image: url(image);
-webkit-background-size: cover;
-moz-background-size: cover;
background-size: cover;
}

Answer 5

In Ioinc-5:
Create a in class home-page.scss.
.class-name {
--background: url("/assets/icon/background.jpg") 0 0/100% 100% no-repeat
}
Open home-page.html and add class in ion-content.
<ion-content class="class-name">

Answer 6

Since the folder structures have changed recently in Ionic 2 beta...
Your image should be at a path similar to www/img/backgrounds/lake.png, and the accompanying CSS should read:
.myClassName {
background: url(../../img/backgrounds/lake.png) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
background-size: cover;
}
Note: you need to jump up 2 directories, ../../

Answer 7

Ionic 4 Change Background color of Ion Content
Explained here Source Link
ion-content{
--background: url(./assets/images/bg1.jpg);
--background-repeat: no-repeat;
--background-size: cover;
}

Answer 8

Try below code to change your image url with full background with different device.
ion-content {
--background: none;
background-image: url('https://cdn.wallpapersafari.com/19/81/zOUft6.jpg');
background-position: center top;
background-repeat: no-repeat;
background-size: cover;
}

Answer 9

below code works for me
--background: none;
background-image: url('../../../assets/imgs/splash.png') ;
background-position: center top;
background-repeat: no-repeat;
background-size: cover;