Kursus CSS Private Online | Cara Membuat Multi Background Pada CSS

Hallo teman-teman Kursus CSS Private Online semuanya kembali lagi di artikel Dumet school, Pada kesempatan kali ini saya akan membahas tentang CSS nih teman-teman setelah dari kemarin-kemarin kita selalu membbahas yang berat-berat Heheh. Oke sekaran lebih sepesifiknya kita akan membahas tentang Cara Membuat Multi Background Pada CSS.Properti CSS Multi Background digunakan untuk menambahkan satu atau lebih gambar pada satu waktu tanpa kode HTML, Kita dapat menambahkan gambar sesuai kebutuhan kami. Sintaks sampel gambar multi background adalah dengan cara sebagai berikut :

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <#style>
        #multibackground {
           background-image: url(https://www.kursuswebsite.org/wp-content/uploads/2019/07/Logo-DUMET-School-Versi-Biru.png), 
           url(http://cdn.backgroundhost.com/backgrounds/subtlepatterns/blu_stripes.png);
           background-position: left top, left top;
           background-repeat: no-repeat, repeat;
           padding: 75px;
        }
     <#/style>
</head>
<body>
      <div id = "multibackground">
         <h1>Kursus Webstite</h1>
         <p>
            Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
         </p>
      </div> 
</body>
</html>

Potongan code di atas hanya sebagai contoh penggunaan saja dan sama sekli tidak saya styling agar rapi karena kita fokus pada penggunaan multi background nya. Oke jika teman-teman kursus css private online lihat pada code di atas khususnya pada bagian css :

 #multibackground {
           background-image: url(https://www.kursuswebsite.org/wp-content/uploads/2019/07/Logo-DUMET-School-Versi-Biru.png), 
           url(http://cdn.backgroundhost.com/backgrounds/subtlepatterns/blu_stripes.png);
           background-position: left top, left top;
           background-repeat: no-repeat, repeat;
           padding: 75px;
        }

Terlihat background-image dapat kita gunakan untuk memasukan lebih dari 1 gambar dalam satu kali pemanggilan CSS dan berkat itulah kita dapat menggunakan multi background pada CSS kita dan kita hanya sesuaikan kembali bentuk dan layouting nya seperti apa.

Hasilnya akan seperti ini :

Oke baiklah teman-teman kursus privat css online cukup sampai di sini dulu pembahasn kita tentang Cara Membuat Multi Background Pada CSS semoga bermanfaat sampai bertemu pada artikel yang selanjutnya.

Cara Membuat Multi Background Pada CSS

Kategori