Dibaca: 263

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

css-background-attachment-fixed

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

css-background-attachment-scroll