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 :)