Cara Menggunakan Property CSS Background-repeat

Di dalam 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 tidak diulang sekali.

secara default, gambar berulang terpotong dengan ukuran elemen, 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  dalam sintaks dua nilai, nilai pertama mewakili perilaku pengulangan horisontal dan nilai kedua merupakan perilaku vertikal. Berikut adalah penjelasan tentang bagaimana masing-masing pilihan bekerja untuk kedua arah:

repeat :  gambar diulang sebanyak yang dibutuhkan untuk menutupi area lukisan gambar latar belakang seluruh.   Gambar terakhir akan dipotong jika tidak cocok.

space : gambar diulang sebanyak mungkin tanpa kliping. Gambar pertama dan terakhir yang disematkan untuk kedua sisi dari elemen, 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 adalah ketika tidak ada cukup ruang untuk menampilkan satu gambar.

no-repeat : gambar tidak 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;
}

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

Semoga bermanfaat.

The post Cara Menggunakan Property CSS Background-repeat appeared first on Kursus Website Terbaik.