Cara Penggunaan Background Repeat pada CSS

Cara Penggunaan Background Repeat pada CSS - Didalam CSS terdapat properti background-repeat yang dapat kita manfaatkan untuk mengatur dan menambahkan gambar untuk ditampilkan kedalam website. Properti background-repeat mempunyai 4 value yang bisa kita gunakan untuk mengatur suatu gambar yang akan dimuat dihalaman web. Nah, kali ini saya akan membahas mengenai Cara Penggunaan Background Repeat pada CSS, mungkin saja diantara kalian ada yang masih bingung untuk penggunaan value dari properti background-repeat, simak selengkapnya penggunaan background-repeat berikut ini.

1. background-repeat: repeat.

background-repeat dengan value repeat didalam CSS dapat kita gunakan untuk menampilkan sebuah gambar secara berulang, artinya gambar akan terus diulang sampai memenuhi ruang elemen. Biasanya repeat digunakan untuk mengatur background berupa gambar jenis pattern.

2. background-repeat: no-repeat.

background-repeat dengan value no-repeat didalam CSS adalah kebalikan dari value repeat, jika repeat gambar agar diulang terus menerus maka value no-repeat akan menampilkan gambar single atau tidak diulang.

3. background-repeat: repeat-x.

background-repeat dengan value repeat-x didalam CSS akan menghasilkan gambar dengan mengulang terus menerus secara horizontal dari kiri kekanan.

4. background-repeat: repeat-y.

Sedangkan background-repeat dengan value repeat-y didalam CSS adalah kebalikan dari repeat-x, jika pada repeat-x gambar akan diulang secara horizontal maka pada repeat-y gambar akan diulang secara vertikal dari atas kebawah.

Sebagai contoh, dibawah ini saya sudah membuat demo untuk penggunaan dari masing - masing background-repeat.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Cara Penggunaan Background Repeat pada CSS</title>
    <style>
body {
    font-family: Arial;
}

div {
  width: 600px;
  height: 130px;
  border: 5px solid #444444;
  margin-bottom: 20px;
  background: url(images.png);
}

#repeat {
    background-repeat: repeat;
}

#no-repeat {
    background-repeat: no-repeat;
}

#repeat-x {
    background-repeat: repeat-x;
}

#repeat-y {
    background-repeat: repeat-y;
}


    </style>
</head>
<body>
    <h2>1. background-repeat: repeat; </h2>
    <div id="repeat"></div>

    <h2>2. background-repeat: no-repeat;</h2>
    <div id="no-repeat"></div>

    <h2>3. background-repeat: repeat-x;</h2>
    <div id="repeat-x"></div>

    <h2>4. background-repeat: repeat-y;</h2>
    <div id="repeat-y"></div>
</body>
</html>

Silahkan buka pada browser masing - masing dan lihat hasilnyanya.

Baiklah, cukup sekian pembahasan kali ini mengenai Cara Penggunaan Background Repeat pada CSS, semoga pembahasan diatas bisa bermanfaat :)

23 Mei 2018

Webinar Gratis 2024


Selanjutnya Pada Bulan Maret 2024

Sabtu, 09 Maret 2024


10 Bahasa Rekomendasi Untuk Dipelajari di 2024

Python Developer, Data Science, Web Application

Kursus Python Django Web Application 2024 di DUMET School Mini Bootcamp Backend Laravel 11 Bulan Mei 2024 di DUMET School
Webinar Selanjutnya Mei 2024

Minggu, 26 Mei 2024, 09.00-13.00 WIB

(4 Jam Membuat Backend di Laravel 11)

chat