Menambahkan Background Image Pada Ionic

Tak jarang dalam sebuah aplikasi kita melihat background dari aplikasi yang mereka gunakan merupakan picture-picutre yang sangat keren. Dalam Ionic hal tersebut sangat mungkin kita gunakan, yaitu memasukan image sebagai background aplikasi kita.
Untuk mempersingkat waktu silahkan buka aplikasi anda yang tengah dibuat. Pada kesempatan kali ini saya akan membukan aplikasi terdahulu saya yaitu "pages" dimana aplikasi ini telah saya perkenalkan pada tutorial sebelumnya yang berjudul "Pindah antar halaman (pages) di Ionic dengan Angular".
Sebelumnya kita lihat dulu penampilan aplikasi sebelum kita masukan background image.

Backround image yang anda kehendaki silahkan simpan pada directory www/img/ . Pada aplikasi saya kali ini, background image yang saya buat adalah spiderman.jpg saya simpan dalam directory www/img/spiderman.jpg. Selanjutnya mari kita buka home.html pada directory www/templates/home.html. Masukkan kode berikut:

<ion-view>
 <ion-header-bar class="bar-positive">
  <h1 class="title">Home</h1>
 </ion-header-bar>
 <ion-content class="padding bg-img">
  <h3>Ini adalah halaman home</h3> Silahkan ganti halaman ini sesuai keinginan anda
  <button class="button button-positive" ui-sref="setting">Go to setting</button>
 </ion-content>
</ion-view>

Setelah selesai kita masukkan code berikut pada style.css yang terletak pada directory www/css/style.css.

.bg-img {
    background: url('../img/spiderman.jpg') no-repeat center center fixed;
    background-size: cover;
    width: 100%;
    height: 100%;
    background-repeat: no-repeat;
}

setelah selesai kita tinggal jalankan aplikasi kita. tampilan akan berubah menjadi seperti gambar berikut ini.