IONIC 2のページの背景イメージ

IONIC 2のページの背景イメージを設定しようとしています。私は複数のものを試しました。前述の方法上記IONIC 2のページの背景イメージ

my Html code**strong text** 

<ion-content class="myview" padding class="letsstart"> 

</ion-content> 

**my scss** 

.myview { 


    background-image: url('../../img/letsstart.jpg'); 
// background-image: url('/img/letsstart.jpg'); 
// background-image: url('img/letsstart.jpg'); 
// background-image: url('../img/letsstart.jpg'); 
// background-image: url('./img/letsstart.jpg'); 

}

機能していない... 私が行方不明です何かあります？

出典

2016-05-20 Kartiikeya Baleneni

あなたのurlに値を持つ変数をtsに含めてから、htmlで変数を使用してみてください。

constructor(){ 
    this.backimg = 'img/letsstart.jpg'; 
    }

HTML

<ion-content class="login-content" style="background-image: url('{{backimg}}')"> 
</ion-content>

SCSS

.login-content{ 
    width: 100%; 
    height: auto; 
    background-repeat: no-repeat; 
    background-size: 100% 100%; 
}

それは私のために働きました。これがあなたにも役立つことを願っています。

出典

2016-05-20 05:22:32 AishApp

uはダイレクトパスを設定し実施している../assets/your_folder/your-image.*

ion-content { background: url("../assets/images/city-view_min_resized.jpg") no-repeat center center fixed; height: 100%; }

はそれが役立ちます:)ホープパスを使用し続けますか？ –

はい。私はwww/imgフォルダに自分のイメージを持っています。 – AishApp

私は同じパスに従っています。それはあなたのために完全にレンダリングされますか？ –

はbackground-imageを使用しないでください：

background-image: url('../../img/letsstart.jpg');

使用background：

background: url('../../img/letsstart.jpg');

出典

2016-09-28 07:39:53

それは次の形式を使用し動作させるために。これは、Webとデバイスの両方で機能するはずです。

background-image: url('../img/lola_akinmade_akerstrom-white_reindeer-1605.jpg');

クレジット： https://forum.ionicframework.com/t/css-body-background-image-not-showing/9649/6

出典

2017-02-01 06:50:44

イオン3.10.1

宣言

page-login { 
    .login-background{ 
     background: no-repeat fixed center; 
     -webkit-background-size: cover; 
     -moz-background-size: cover; 
     background-size: cover; 
     background-image: url(/assets/img/background.jpg); 
    } 
}

結果に引用符とフィニッシュせずに含める：