Tutorial Belajar CSS Bagian 47 : Cara Menggunakan Property Background Attachment di CSS

Pada tutorial sebelumnya, kita sudah belajar tentang Tutorial Belajar CSS Bagian 46 : Cara Menggunakan Property Background Color di CSS. Pada tutorial ini kita akan belajar tentang cara menggunakan property background attachment di CSS untuk mengatur gambar latar belakang.

Properti background-attachment  digunakan untuk menentukan bahwa gambar latar belakang tetap atau gulir dengan sisa halaman di jendela browser.

Properti ini memiliki tiga nilai gulir, tetap, dan lokal. Nilai defaultnya adalah gulir, yang menyebabkan elemen tidak menggulir dengan kontennya. Nilai lokal dari properti ini menyebabkan elemen bergulir dengan konten. Jika kita menetapkan nilai tetap, gambar latar belakang tidak akan bergerak saat menggulir di browser.

Properti CSS ini dapat mendukung banyak gambar latar belakang. Kita dapat menentukan nilai yang berbeda dari properti background-attachment  untuk setiap background-image, dipisahkan dengan koma. Setiap gambar akan cocok dengan nilai yang sesuai dari properti ini.

Sintaksis

background-attachment: scroll | fixed | local | initial | inherit;

Nilai properti ini didefinisikan sebagai berikut.

Nilai Properti

NilaiDeskripsi
scrollIni adalah nilai default yang mencegah elemen menggulir dengan konten, tetapi menggulir dengan halaman.
fixedDengan menggunakan nilai ini, gambar latar belakang tidak bergerak bersama elemen, bahkan elemen tersebut memiliki mekanisme pengguliran. Ini menyebabkan gambar terkunci di satu tempat, walaupun dokumen lainnya bergulir.
localDengan menggunakan nilai ini, jika elemen memiliki mekanisme pengguliran, gambar latar belakang akan menggulir dengan konten elemen.
initialIni mengatur properti ke nilai defaultnya.
inheritIni mewarisi properti dari elemen induknya.
  • Mari kita pahami properti ini dengan menggunakan beberapa contoh.

Dalam contoh ini, kita menggunakan nilai scroll dari properti background-attachment , yang merupakan perilaku default. Jadi, saat halaman digulir, latar belakang ikut bergulir.

<!DOCTYPE html>  
<html>  
<head>  
<title>  
Property background-attachment
</title>  
<style>  
  #contoh {  
  background-image:  url("https://mbahwp.com/wp-content/uploads/2023/03/pohon.jpeg");  
  font-size: 35px;  
  border: 4px solid red;  
  color: white;  
  background-position: center;  
  background-color: green;      
  background-repeat: no-repeat;  
  background-attachment : scroll;  
  }   
</style>  
</head>  
<body>  
  <h1> background-attachment : scroll;</h1>  
  <p>Jika tidak ada scrollbar di layar Anda, coba ubah ukuran jendela browser untuk melihat efeknya. </p>  
  <div id="contoh">  
  <p>  
  Hai, selamat datang di mbahwp.com. Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?.  
  </p>  
  </div>  
</body>  
</html>

Hasil dari kode di atas adalah :

Contoh – Menggunakan nilai fixed

Dalam contoh ini, kita menggunakan nilai fixed dari properti background-attachment . Nilai ini akan membuat gambar latar belakang tetap ditempat, dan gambar tidak akan bergerak walaupun dokumen digulung ke atas atau ke bawah.

<!DOCTYPE html>  
<html>  
<head>  
<title>  
Property background-attachment
</title>  
  
<style>  
    #contoh {  
    background-image:  url("https://mbahwp.com/wp-content/uploads/2023/03/pohon.jpeg ");  
    font-size: 35px;  
    border: 4px solid red;  
    color: white;  
    background-position: center;  
    background-color: green;      
    background-repeat: no-repeat;  
    background-attachment : fixed;  
    }  
</style>  
</head>  
  
<body>  
    <h1> background-attachment : fixed;</h1>  
    <p>Jika tidak ada scrollbar di layar Anda, coba ubah ukuran jendela browser untuk melihat efeknya. </p>  
    <div id="contoh">  
    <p>  
    Hai, selamat datang di mbahwp.com. Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?.  
    </p>  
    </div>  
  
</body>  
</html>

Hasil dari kode di atas adalah :

Contoh – Menggunakan nilai local

Dalam contoh ini, kita menggunakan nilai local dari properti background-attachment . Di sini, background-image akan bergulir dengan bergulirnya konten elemen.

<!DOCTYPE html>  
<html>  
<head>  
<title>  
Property background-attachment
</title>  
  
    <style>  
    #contoh {  
    background-image:  url("https://mbahwp.com/wp-content/uploads/2023/03/pohon.jpeg ");  
    font-size: 35px;  
    border: 4px solid red;  
    color: white;  
    background-position: center;  
    background-color: green;      
    background-repeat: no-repeat;  
    background-attachment : local;  
    }  
    </style>  
  
</head>  
  
<body>  
    <h1> background-attachment : local;</h1>  
    <p>Jika tidak ada scrollbar di layar Anda, coba ubah ukuran jendela browser untuk melihat efeknya. </p>  
    <div id="contoh">  
    <p>  
    Hai, selamat datang di mbahwp.com. Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?.  
    </p>  
    </div>  
</body>  
</html>  

Hasil dari kode di atas adalah :

Sekarang, mari kita lihat contoh lain di mana kita menggunakan lebih dari satu gambar latar belakang untuk sebuah elemen.

Di sini, ada 2 gambar latar tempat kita menerapkan properti background-attachment . Lampiran untuk gambar pertama disetel ke fixed, sedangkan lampiran untuk gambar kedua disetel ke scroll.

<!DOCTYPE html>  
<html>  
<head>  
<title>  
Property background-attachment
</title>  
  
    <style>  
    #contoh {  
    background-image:  url("https://mbahwp.com/wp-content/uploads/2017/08/Logo-Mbah-WP-Mobile.png"), url("https://mbahwp.com/wp-content/uploads/2023/03/pohon.jpeg");  
    height: 500px;  
    border: 4px solid red;  
    background-position: center;  
    background-repeat: no-repeat;  
    background-attachment : fixed, scroll;  
    }  
    </style>  
  
</head>  
  
<body>  
    <h1> background-attachment : fixed scroll;</h1>  
    <p> Jika tidak ada scrollbar di layar Anda, coba ubah ukuran jendela browser untuk melihat efeknya.</p>  
    <div id="contoh">    

    </div>  
</body>  
</html>   

Hasil dari kode di atas adalah :

Semoga tutorial background attachment ini membantu Anda untuk memahami cara menggunakan property background attachment dalam mengatur gambar latar belakang di website Anda.

You May Also Like

Tinggalkan Balasan

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *

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

0