CSS REPEAT

Gunakan css dan HTML berikut

<style>

.icon {

background-image:url(http://wscont1.apps.microsoft.com/winstore/1x/a14c3995-34d7-454c-82e2-0c192e48b91a/Icon.173718.png);

min-height:160px;

min-width:160px;

border:2px blue double;

margin:2px;

}

.icon2a {

background-repeat: repeat-x;

}

.icon2b {

background-repeat: repeat-y;

}

</style>

<div class='icon'></div>

<div class='icon icon2a'></div>

<div class='icon icon2b'></div>

Dengan code di atas, kita melihat perbedaan bagaimana background dapat berjalan. untuk css lainnya

• background-attachment menentukan apakah posisi gambar (lebih cocok sebagai background halaman bukan div seperti contoh) tetap atau bergerak saat di scroll
• background-position : posisi gambar berdasarkan tempatnya. Apabila tempatnya yang kita sudah tentukan adalah div (contoh icon di atas), maka posisinya akan menyesuaikan. nilai yang bisa dimasukkan
• left top , left bottom, left center dan seterusnya. Atau gabungan antara (left-right-center) dan (top-bottom-center)
• persen contoh: 10% 20%
• pixel
• background-size: ukuran gambar / background yang tampil. Asumsikan kamu memiliki 50px-40px. dengan background size maka kamu akan mendapatkan hasil yang berbeda

BACKGROUND-SIZE

Ukuran background juga dapat kita edit. Ini sangat berguna apabila kita akan memasang logo tetapi tidak memakai <img> dan pengaturan div bersangkutan sangat kritikal disini.

<style>

.icon, .icon3 {

background-image:url(http://wscont1.apps.microsoft.com/winstore/1x/a14c3995-34d7-454c-82e2-0c192e48b91a/Icon.173718.png);

min-height:160px;

min-width:160px;

border:2px blue double;

margin:2px;

}

.icon3 {

background-repeat: no-repeat;

width:160px;

}

.icon3a {

background-size:auto;

/*tidak ada perubahan*/

}

.icon3b {

background-size:20px 20px;

/*perubahan ukuran*/

}

.icon3c {

background-size:60px 20px;

/*perubahan ukuran*/

}

.icon3d {

background-size:30px;

/* perubahan pada lebar dan tinggi menyesuaikan*/

}

.icon3e {

background-size: 40%;

/* perubahan pada lebar dan tinggi menyesuaikan*/

}

.icon3f {

background-size: 40% 10%;

/* perubahan pada lebar dan tinggi  */

}

.icon3g {

background-size: 100%;

width:200px;

height:170px;

/* perubahan pada lebar dan tinggi  */

}

.icon3h {

background-size: 100% 100%;

width:200px;

height:170px;

/* perubahan pada lebar dan tinggi  */

}

</style>

<div class='icon3 icon3a'></div>

<div class='icon3 icon3b'></div>

<div class='icon3 icon3c'></div>

<div class='icon3 icon3d'></div>

<div class='icon3 icon3e'></div>

<div class='icon3 icon3f'></div>

<div class='icon3 icon3g'></div>

<div class='icon3 icon3h'></div>