Properti background-attachment

Properti background-attachment menentukan bagaimana cara menggulir gambar latar belakang elemen: bersama dengan teks atau teks akan meluncur di atas gambar.

Sintaks

cssselector {
  background-attachment: fixed | scroll | local;
}

Nilai

Nilai	Deskripsi
`fixed`	Gambar latar belakang akan tetap diam, dan teks akan meluncur di atasnya.
`scroll`	Gambar latar belakang akan digulir bersama dengan teks.
`local`	Latar belakang diposisikan tetap dengan mempertimbangkan perilaku elemen. Jika elemen memiliki guliran, maka latar belakang akan digulir bersama dengan kontennya, tetapi latar belakang yang melampaui batas elemen akan tetap di tempatnya.

Nilai default: scroll.

Contoh . Nilai scroll

Sekarang properti background-attachment diatur ke nilai scroll. Gulir elemen secara vertikal - Anda akan melihat bagaimana teks tergulir bersama dengan latar belakang:

html<body>
  <div id="elem">
    some long text
  </div>
</body>

cssbody {
  background-attachment: scroll;
  background-image: url("bg.png");
}

#elem {
  width: 400px;
  margin: 0 auto;
  text-align: justify;
  font-weight: bold;
  font-size: 20px;
}

Результат:

Contoh . Nilai fixed

Dan sekarang properti background-attachment diatur ke nilai fixed. Gulir elemen secara vertikal - Anda akan melihat bagaimana teks meluncur di atas latar belakang:

html<body>
  <div id="elem">
    some long text
  </div>
</body>

cssbody {
  background-attachment: fixed;
  background-image: url("bg.png");
}

#elem {
  width: 400px;
  margin: 0 auto;
  text-align: justify;
  font-weight: bold;
  font-size: 20px;
}

Результат:

Lihat juga

properti background,
yang merupakan properti singkatan untuk latar belakang