background-attachment di CSS
Properti background-attachment berfungsi untuk menentukan apakah gambarbackground harus di-scroll atau diperbaiki (tidak akan di-scroll dengan sisa halaman):
Contoh
Tentukan background-image harus diperbaiki:
<!DOCTYPE html> <html> <head> <style> body { background-image: url("https://dosenit.com/wp-content/uploads/2020/10/cartoon_mobile_phone.png"); background-repeat: no-repeat; background-position: right top; margin-right: 200px; background-attachment: fixed; } </style> </head> <body> <h1>Properti background-attachment CSS</h1> <p> Properti lampiran latar belakang menentukan apakah gambar latar belakang harus di-scroll atau diperbaiki (tidak akan bergulir dengan sisa halaman). </p> <p> <strong> Kiat: </strong> Jika Anda tidak melihat bilah gulir, coba ubah ukuran jendela browser. </p> <p> Background-Image percobaan. Coba scroll ke bawah halaman. </p> <p> Background-Image percobaan. Coba scroll ke bawah halaman. </p> <p> Background-Image percobaan. Coba scroll ke bawah halaman. </p> <p> Background-Image percobaan. Coba scroll ke bawah halaman. </p> <p> Background-Image percobaan. Coba scroll ke bawah halaman. </p> <p> Background-Image percobaan. Coba scroll ke bawah halaman. </p> <p> Background-Image percobaan. Coba scroll ke bawah halaman. </p> <p> Background-Image percobaan. Coba scroll ke bawah halaman. </p> <p> Background-Image percobaan. Coba scroll ke bawah halaman. </p> <p> Background-Image percobaan. Coba scroll ke bawah halaman. </p> <p> Background-Image percobaan. Coba scroll ke bawah halaman. </p> <p> Background-Image percobaan. Coba scroll ke bawah halaman. </p> <p> Background-Image percobaan. Coba scroll ke bawah halaman. </p> <p> Background-Image percobaan. Coba scroll ke bawah halaman. </p> <p> Background-Image percobaan. Coba scroll ke bawah halaman. </p> <p> Background-Image percobaan. Coba scroll ke bawah halaman. </p> <p> Background-Image percobaan. Coba scroll ke bawah halaman. </p> <p> Background-Image percobaan. Coba scroll ke bawah halaman. </p> <p> Background-Image percobaan. Coba scroll ke bawah halaman. </p> <p> Background-Image percobaan. Coba scroll ke bawah halaman. </p> </body> </html>
Contoh
Tentukan background-image harus bergulir dengan sisa halaman:
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-image: url("https://dosenit.com/wp-content/uploads/2020/10/cartoon_mobile_phone.png");
background-repeat: no-repeat;
background-position: right top;
margin-right: 200px;
background-attachment: scroll;
}
</style>
</head>
<body>
<h1>Properti background-attachment CSS</h1>
<p> Properti lampiran latar belakang menentukan apakah gambar latar belakang harus di-scroll atau diperbaiki (tidak akan bergulir dengan sisa halaman). </p>
<p> <strong> Kiat: </strong> Jika Anda tidak melihat bilah gulir, coba ubah ukuran jendela browser. </p>
<p> Gulungan gambar background. Coba scroll ke bawah halaman. </p>
<p> Gulungan gambar background. Coba scroll ke bawah halaman. </p>
<p> Gulungan gambar background. Coba scroll ke bawah halaman. </p>
<p> Gulungan gambar background. Coba scroll ke bawah halaman. </p>
<p> Gulungan gambar background. Coba scroll ke bawah halaman. </p>
<p> Gulungan gambar background. Coba scroll ke bawah halaman. </p>
<p> Gulungan gambar background. Coba scroll ke bawah halaman. </p>
<p> Gulungan gambar background. Coba scroll ke bawah halaman. </p>
<p> Gulungan gambar background. Coba scroll ke bawah halaman. </p>
<p> Gulungan gambar background. Coba scroll ke bawah halaman. </p>
<p> Gulungan gambar background. Coba scroll ke bawah halaman. </p>
<p> Gulungan gambar background. Coba scroll ke bawah halaman. </p>
<p> Gulungan gambar background. Coba scroll ke bawah halaman. </p>
<p> Gulungan gambar background. Coba scroll ke bawah halaman. </p>
<p> Gulungan gambar background. Coba scroll ke bawah halaman. </p>
<p> Gulungan gambar background. Coba scroll ke bawah halaman. </p>
<p> Gulungan gambar background. Coba scroll ke bawah halaman. </p>
<p> Gulungan gambar background. Coba scroll ke bawah halaman. </p>
<p> Gulungan gambar background. Coba scroll ke bawah halaman. </p>
<p> Gulungan gambar background. Coba scroll ke bawah halaman. </p>
<p> Gulungan gambar background. Coba scroll ke bawah halaman. </p>
<p> Gulungan gambar background. Coba scroll ke bawah halaman. </p>
<p> Gulungan gambar background. Coba scroll ke bawah halaman. </p>
<p> Gulungan gambar background. Coba scroll ke bawah halaman. </p>
<p> Gulungan gambar background. Coba scroll ke bawah halaman. </p>
<p> Gulungan gambar background. Coba scroll ke bawah halaman. </p>
<p> Gulungan gambar background. Coba scroll ke bawah halaman. </p>
<p> Gulungan gambar background. Coba scroll ke bawah halaman. </p>
<p> Gulungan gambar background. Coba scroll ke bawah halaman. </p>
<p> Gulungan gambar background. Coba scroll ke bawah halaman. </p>
<p> Gulungan gambar background. Coba scroll ke bawah halaman. </p>
<p> Gulungan gambar background. Coba scroll ke bawah halaman. </p>
<p> Gulungan gambar background. Coba scroll ke bawah halaman. </p>
<p> Gulungan gambar background. Coba scroll ke bawah halaman. </p>
<p> Gulungan gambar background. Coba scroll ke bawah halaman. </p>
<p> Gulungan gambar background. Coba scroll ke bawah halaman. </p>
<p> Gulungan gambar background. Coba scroll ke bawah halaman. </p>
<p> Gulungan gambar background. Coba scroll ke bawah halaman. </p>
<p> Gulungan gambar background. Coba scroll ke bawah halaman. </p>
<p> Gulungan gambar background. Coba scroll ke bawah halaman. </p>
</body>
</html>
