CSS Background Attachment
Properti background-attachment digunakan untuk mendefinisikan gambar latar apakah fixed (tetap) atau scroll (ikut bergeser saat discroll). Untuk lebih jelasnya perhatikan contoh di bawah.
background-attachment: fixed
Gambar latar posisinya tetap berada pada posisi yang ditentukan oleh properti background-position walaupun layar diskroll ke bawah.
<!DOCTYPE html>
<html>
<head>
<title>CSS Background Attachment</title>
</head>
<style>
body {
background-image: url("rajatutor.png");
background-repeat: no-repeat;
background-position: top right;
background-attachment: fixed;
}
</style>
<body>
<br>
<p>Ini adalah contoh sebuah paragraf 1</p>
<p>Ini adalah contoh sebuah paragraf 2</p>
<p>Ini adalah contoh sebuah paragraf 3</p>
<p>Ini adalah contoh sebuah paragraf 4</p>
<p>Ini adalah contoh sebuah paragraf 5</p>
<p>Ini adalah contoh sebuah paragraf 6</p>
<br>
</body>
</html>
Berikut adalah hasilnya bila dilihat dengan browser
background-attachment: scroll
Gambar latar posisinya berada pada posisi yang ditentukan oleh properti background-position tapi akan ikut bergeser ke atas saat layar diskroll ke bawah.
<!DOCTYPE html>
<html>
<head>
<title>CSS Background Attachment</title>
</head>
<style>
body {
background-image: url("rajatutor.png");
background-repeat: no-repeat;
background-position: top right;
background-attachment: scroll;
}
</style>
<body>
<br>
<p>Ini adalah contoh sebuah paragraf 1</p>
<p>Ini adalah contoh sebuah paragraf 2</p>
<p>Ini adalah contoh sebuah paragraf 3</p>
<p>Ini adalah contoh sebuah paragraf 4</p>
<p>Ini adalah contoh sebuah paragraf 5</p>
<p>Ini adalah contoh sebuah paragraf 6</p>
<br>
</body>
</html>
Berikut adalah hasilnya bila dilihat dengan browser
