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

0
27

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.

LEAVE A REPLY

Please enter your comment!
Please enter your name here

This site uses Akismet to reduce spam. Learn how your comment data is processed.