Ionic full screen background image

I am new to the Ionic framework and I am trying to start the app with a full screen background image like this: enter image description here

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;
}

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.

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;
    }

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;
}

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;

}