Iwan Setiawan

Web & graphic designer, illustrator

Love digital design, follow me @intraktives

Satu lagi fitur yang sangat membantu dari CSS3 berkaitan dengan background image yakni multiple background. Dengan fitur ini kita bisa menggunakan 2 atau lebih background image pada satu elemen. Pada CSS2 sebelumnya kita hanya bisa menggunakan satu background image untuk setiap elemen.

 

 

Pada tutorial ini kita akan membandingkan antara background image CSS2 dengan background image CSS3.

 

1. CSS2 Background Image


Pada contoh di atas kita hanya bisa menggunakan 1 background image untuk satu elemen. Sehingga untuk menggunakan 2 background image kita harus menggunakan 2 elemen CSS pula.

HTML

<div class="bgr">bgr1</div>

CSS

.bgr{
    background-image: url("image.jpg");
  }

 

2. CSS3 Background Image


Pada contoh di atas dengan CSS3 background image kita bisa menggunakan lebih dari 1 background image untuk satu elemen. Pada contoh ini kita menggunakan 3 background image untuk 1 elemen CSS.Tentu hal ini tidak bisa kita lakukan menggunakan CSS2 background image

HTML

<div class="bgr">bgr1</div>

CSS

.bgr{
    background: url("bgr1.jpg") no-repeat 0 0;
    background: url("bgr2.jpg") no-repeat bottom left;
    background: url("bgr3.jpg") no-repeat top right;

  }