背景图像不是离子2应用程序中的离子列表视图

Question

我想在离子2应用程序中设置背景图像，但背景图像未设置在列表后面。有没有办法让图像覆盖整个屏幕和列表视图？

截图：

我的代码：

.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

由于得到了答案。

ion-item{ 
 
    background: transparent !important; 
 
}

Answer 2

设置背景大小财产保险象下面这样：

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