15 Mei 2014

Cara Membuat Multiple Background dengan CSS

Normalnya, sebuah DIV memiliki satu background. Namun, dalam kasus tertentu, sebuah DIV memerlukan lebih dari satu background. Penggunaan lebih dari background ini adalah berfungsi untuk mengurangi beban yang dimuat akibat ukuran background yang terlalu besar.

Baca juga: Cara Membuat Tampilan Website Responsif

Biasanya, background paling belakang diisi dengan sebuah pola. Sedangkan background di depannya, berisi dengan gambar yang lebih spesifik. Masih bingung dengan apa yang saya maksud? Berikut ini adalah demo dan cara membuat multiple background dengan CSS.

Cara Membuat Multiple Background dengan CSS

Cara membuat multiple background adalah dengan memasukkan beberapa nilai pada satu properti background. Jika dirumuskan, multiple background diatur seperti ini:

background: bg-1, bg-2, ... , bg-N;

"Bg-N" adalah background yang terletak di dasar, sedangkan "bg-1" adalah background yang terletak di paling atas. Berikut ini adalah demonya.

See the Pen oLxAq by Iskandar Dzulkarnain (@iskael) on CodePen.

Pada demo di atas, background yang paling bawah adalah background polkadot, sedangkan background yang paling atas adalah background bintang di sebelah kanan yang mempunyai posisi tetap walaupun digulir.

Bagaimana? Mudah, 'kan? Atau ada yang mau didiskusikan atau ditanyakan? Silakan tinggalkan komentar :)

2 komentar:

  1. kayak blog zero intikali pakai dua background

    satu statis, satu bergerak

    BalasHapus
    Balasan
    1. iya yo, di zero emang pake multiple background :D
      malah banyak banget image-nya

      Hapus

Populer Terbaru Komentar

Entri Terbaru

Komentar Terbaru

Creative Commons License
All contents by Iskael is licensed under a Creative Commons Attribution-NonCommercial-NoDerivs 3.0 Unported License.
Based on a work at Iskael.
Permissions beyond the scope of this license may be available at Iskael.
© 2013 Belajar Ngeblog bersama Iskael. All Right Reserved. Powered by Blogger. Iskael Template by Iskael. Submitted on TopBlogIndonesia