Hintergrundbild kommt nicht mit der Ionenlistenansicht in ionic 2 Anwendung

Question

Ich versuche, ein Hintergrundbild in ionic 2-Anwendung zu setzen, aber das Hintergrundbild wird nicht hinter der Liste eingestellt. Gibt es eine Möglichkeit, das Bild auch mit der Listenansicht auf den gesamten Bildschirm zu bringen?

Screenshot:

Mein Code:

.backgound-image { 
 
    background-image: url('../img/Grammar.jpg'); 
 
    width: 100%; 
 
    background-size: 100% 100%; 
 
    background-repeat: no-repeat; 
 
    background-position: center center;

<ion-content class="backgound-image"> 
 
    
 
    <ion-title></ion-title> 
 
    <ion-list> 
 
    <ion-item>  
 
    <ion-label floating>Username</ion-label> 
 
    <ion-input type="text"></ion-input> 
 
    </ion-item> 
 
    <ion-item> 
 
    <ion-label floating>Password</ion-label> 
 
    <ion-input type="password"></ion-input> 
 
    </ion-item> 
 
    <br> 
 
    <ion-item style="text-align:center;"> 
 
    
 
    <button style="border-radius: 0px!Important; width: 70%!Important;" ion-button color="primary" (click)="dashboardPage()">Login</button><br><br> 
 
    <p style="text-align: center;color: blue;">Forgot password?</p><hr> 
 
<p style="text-align: center; display: inline ">not a member? </p><p style="text-align: center;color: blue; display: inline"> Sign up here</p> 
 
    </ion-item> 
 
    </ion-list> 
 
    
 
    <div class="hr-sect">Or Login with</div> 
 
    
 
    <ion-grid> 
 
    <ion-row> 
 
    <button style="border-radius: 0px!Important; width: 70%!Important; margin-left: 15%;" ion-button block color="danger">Google+</button> 
 
    </ion-row> 
 
    <ion-row> 
 
    <button style="border-radius: 0px!Important; width: 70%!Important; margin-left: 15%;" ion-button block color="button">facebook</button> 
 
    </ion-row> 
 
    </ion-grid> 
 
    
 
    
 
    <ion-footer style="margin:0rem 0rem!Important;"> 
 
    <button ion-button block color="Dark" (click)="pushPage()">Explore</button> 
 
    </ion-footer> 
 
</ion-content>

Answer 1

Dank bekam die Antwort.

ion-item{ 
 
    background: transparent !important; 
 
}

Answer 2

Set Hintergrund Leimeigenschaft Abdeckung wie unten:

.backgound-image { 
 
    background-image: url('../img/Grammar.jpg'); 
 
    width: 100%; 
 
    background-size: cover; 
 
    background-repeat: no-repeat; 
 
    background-position: center center; 
 
}