Tutorial Belajar CSS Bagian 21 : Cara Mengatur Multi Background di CSS

0
541

Pada tutorial sebelumnya, kita sudah mempelajari Tutorial Belajar CSS Bagian 20 : Cara Mengatur Border Image di CSS. Selanjutnya, kita akan mempelajari cara mengatur multi background di CSS.

Properti CSS multi background digunakan untuk menambahkan satu atau lebih gambar sekaligus tanpa kode HTML, Kita dapat menambahkan gambar sesuai kebutuhan.

Contoh sintaks gambar multi background 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;
}

Nilai yang paling umum digunakan untuk multi background adalah sebagai berikut :

No.Nilai & Deskripsi
1background
Digunakan untuk mengatur semua properti gambar background dalam satu bagian
2background-clip
Digunakan untuk mendeklarasikan area gambar background
3background-image
Digunakan untuk menentukan gambar background
4background-origin
Digunakan untuk menentukan posisi gambar background
5background-size
Digunakan untuk menentukan ukuran gambar background

Untuk lebih jelasnya, Anda bisa melihat penggunaan multi background melalui contoh berikut ini :

<html>
   <head>
      <style>
         #multibackground {
            background-image: url(https://mbahwp.com/wp-content/uploads/2017/07/Logo-Mbah-WP.png), url(https://image.freepik.com/free-photo/abstract-techno-background_1048-8572.jpg);
            background-position: left top, left top;
            background-repeat: no-repeat, repeat;
            padding: 75px;
         }
      </style>
   </head>

   <body>
   
      <div id = "multibackground">
         <h1>mbahwp.com </h1>
         <p>
            Mbah WP adalah website yang membahas berbagai materi seperti bisnis online 
            ,server, web programing, blogging dan masalah terkait teknologi 
            Anda bisa belajar apapun terkait teknologi lewat website ini.
         </p>
      </div>
      
   </body>
</html>

Browser akan menampilkan hasil sebagai berikut :

Semoga tutorial ini membantu Anda untuk mempelajari cara mengatur multi background di CSS untuk mempercantik tampilan dokumen HTML.

TINGGALKAN KOMENTAR

Silakan masukkan komentar anda!
Silakan masukkan nama Anda di sini

Situs ini menggunakan Akismet untuk mengurangi spam. Pelajari bagaimana data komentar Anda diproses.