Cara Menggunakan CSS Multi Background

Hallo sahabat dumenity berjumpa lagi dalam tutorialÂ kursuswebdesign,Â pada tutorial kali ini saya akan membahas tentangÂ Cara Menggunakan CSS Multi Background.Â CSS Multi background properties digunakan untuk menambahkan satu atau lebih gambar sekaligus tanpa kode HTML, Kita bisa menambahkan gambar sesuai kebutuhan kita. Contoh sintaks multi background images adalah sebagai berikut :

#multibackground {
   background-image: url(/css/images/logo.png), url(/css/images/border.png);
   background-position: left top, left top;
   background-repeat: no-repeat, repeat;
   padding: 75px;
}

Untuk menggunakan kedalam website caranya cukup mudah dan simpel sekali, oke saya akan memberikan langsung contohnya. Buatlah file dengan namaÂ Â CSS_MultiBackground.html

Kalau sudah silahakan lihat contoh script di bawah ini silahkan teman – teman salin untuk mempraktikannya.

<html>
   <head>
   
      <style>
         #multibackground {
            background-image: url(background.jpg), url(gambar.png);
            background-position: left top, left top;
            background-repeat: no-repeat, repeat;
            padding: 75px;
         }
      </style>
      
   </head>
   <body>
   
      <div id="multibackground">
         <h1>www.Teks dummy.com</h1>
         <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
         tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
         quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
         consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
         cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
         proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
      </div>
      
   </body>
</html>

Oke kalau sudah silahkan teman – teman save, untuk melihat hasilnya silahkan teman – teman buka pada browsernya. bagaimana teman – teman cukup mudah bukanÂ Cara Menggunakan CSS Multi Background semoga bermanfaat.

Kategori