Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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;
}
like image 583
Sinan Samet Avatar asked May 28 '14 08:05

Sinan Samet


2 Answers

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.

like image 144
Mr MT Avatar answered Nov 12 '22 09:11

Mr MT


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

like image 16
Helmut Avatar answered Nov 12 '22 09:11

Helmut