Cara Menggunakan Property CSS Background-repeat

Di pada cara menggunakan property CSS background-repeat mendefinisikan bagaimana gambar latar belakang yang berulang. Sebuah gambar latar belakang dapat diulang sepanjang sumbu horisontal, sumbu vertikal, kedua sumbu, atau tak diulang sekali.

secara default, gambar berulang terpotong dengan ukuran unsur, tetapi mereka dapat disesuaikan dengan ukuran (menggunakan round) atau merata dari ujung ke ujung (menggunakan spasi).

Property dan value CSS Background-repeat

/* One-value syntax */
background-repeat: repeat-x;
background-repeat: repeat-y;
background-repeat: repeat;
background-repeat: space;
background-repeat: round;
background-repeat: no-repeat;

/* Two-value syntax: horizontal | vertical */
background-repeat: repeat space;
background-repeat: repeat repeat;
background-repeat: round space;
background-repeat: no-repeat round;

background-repeat: inherit;

cara menggunakan property CSS background-repeat  pada sintaks dua nilai, nilai pertama-tama mewakili perilaku pengulangan horisontal dan nilai kedua adalah sebuah perilaku vertikal. Berikut ialah penjelasan mengenai bagaimana masing-masing alternatif bekerja bagi kedua arah:

repeat :  gambar diulang sebanyak yang dibutuhkan bagi menutupi area lukisan gambar latar belakang seluruh.   Gambar terakhir akan dipotong apabila tak cocok.

space : gambar diulang sebanyak mungkin tanpa kliping. Gambar pertama-tama dan terakhir yang disematkan bagi kedua sisi dari unsur, dan spasi didistribusikan secara merata antara gambar. Properti background-position diabaikan kecuali hanya satu gambar dapat ditampilkan tanpa kliping. Satu-satunya kasus di mana kliping terjadi menggunakan ruang ialah ketika tak ada lumayan ruang bagi menampilkan satu gambar.

no-repeat : gambar tak diulang (dan karenanya daerah lukisan gambar latar belakang belum tentu sepenuhnya tertutup). Posisi non-berulang gambar latar belakang didefinisikan oleh properti CSS background-position.

Contoh ;

HTML

<ol>
    <li>no-repeat
        <div class=one></div>
    </li>
    <li>repeat
        <div class=two></div>
    </li>
    <li>repeat-x
        <div class=three></div>
    </li>
    <li>repeat-y
        <div class=four></div>
    </li>
    <li>space
        <div class=five></div>
    </li>
    <li>round
        <div class=six></div>
    </li>
    <li>repeat-x, repeat-y (multiple images)
        <div class=seven></div>
    </li>
</ol>

CSS

/* Shared for all DIVS in example */
ol, li {
  margin: 0;
  padding: 0;
}
li {
  margin-bottom: 12px;
}
div {
    background-image: url(https://mdn.mozillademos.org/files/12005/starsolid.gif);
    width: 160px;
    height: 70px;
}

/* background repeat CSS */
.one {
    background-repeat: no-repeat;
}
.two {
    background-repeat: repeat;
}
.three {
    background-repeat: repeat-x;
}
.four {
    background-repeat: repeat-y;
}

.five {
   background-repeat: space;
}

.six {
   background-repeat: round;
}

/* Multiple images */
.seven {
    background-image:  url(https://mdn.mozillademos.org/files/12005/starsolid.gif),
                       url(https://developer.cdn.mozilla.net/media/redesign/img/favicon32.png);
    background-repeat: repeat-x,
                       repeat-y;
    height: 144px;
}

Bagi melihat hasilnya cara menggunakan property CSS Background-repeat silahkan lihat di demo berikut ini, Demo!

Semoga bermanfaat.

Sumber https://kursuswebsite.org