Belajar Koding HTML & CSS Bagian 7: Membuat Ukuran Background Attachement
.png)
Dalam HTML dan CSS, properti background-attachment digunakan untuk menentukan apakah gambar latar belakang akan bergulir
bersama konten atau tetap diam saat pengguna menggulir halaman.
Nilai Properti background-attachment
- scroll: Gambar latar belakang bergulir bersama
konten halaman. Ini adalah nilai default.
- fixed: Gambar latar belakang tetap diam dan tidak
bergulir saat pengguna menggulir halaman.
- local: Gambar latar belakang bergulir bersama
konten elemen tempat gambar tersebut diterapkan.
Contoh Penggunaan
1. Gambar Latar Belakang Bergulir Bersama Konten (scroll):
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<title>Contoh
Background Attachment Scroll</title>
<style>
body
{
background-image:
url('gambar-latar.jpg');
background-attachment:
scroll;
background-size:
cover;
background-repeat:
no-repeat;
}
.content
{
height:
1500px;
}
</style>
</head>
<body>
<div class="content">
<h1>Selamat
Datang!</h1>
<p>Gambar
latar belakang akan bergulir bersama konten halaman.</p>
</div>
</body>
</html>
 |
| Tampilan Hasil (Output) Background (scroll) |
Dalam contoh ini, saat Anda menggulir halaman,
gambar latar belakang akan bergerak bersama konten.
2. Gambar Latar Belakang Tetap Diam (fixed):
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<title>Contoh
Background Attachment Fixed</title>
<style>
body
{
background-image:
url('gambar-latar.jpg');
background-attachment:
fixed;
background-size:
cover;
background-repeat:
no-repeat;
}
.content
{
height:
1500px;
}
</style>
</head>
<body>
<div class="content">
<h1>Selamat
Datang!</h1>
<p>Gambar
latar belakang tetap diam saat Anda menggulir halaman.</p>
</div>
</body>
</html>
 |
| Tampilan Hasil (Output) Background (fixed) |
Di sini, gambar latar belakang akan tetap diam di
tempatnya saat Anda menggulir konten halaman, menciptakan efek parallax
sederhana.
3. Gambar Latar Belakang Bergulir Bersama Konten Elemen (local):
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<title>Contoh
Background Attachment Local</title>
<style>
.container
{
width:
300px;
height:
300px;
overflow:
auto;
background-image:
url('gambar-latar.jpg');
background-attachment:
local;
background-size:
cover;
background-repeat:
no-repeat;
}
.content
{
height:
600px;
}
</style>
</head>
<body>
<div class="container">
<div
class="content">
<h1>Selamat
Datang!</h1>
<p>Gambar
latar belakang bergulir bersama konten dalam elemen ini.</p>
</div>
</div>
</body>
</html>
 |
| Tampilan Hasil (Output) Background (local) |
Pada contoh ini, elemen .container memiliki
konten yang dapat digulir. Gambar latar belakang akan bergulir bersama konten
di dalam elemen tersebut.
Dengan memahami dan menggunakan properti background-attachment, Anda dapat mengontrol perilaku gambar latar belakang sesuai kebutuhan
desain halaman web Anda.
REFERENSI
0 Response to "Belajar Koding HTML & CSS Bagian 7: Membuat Ukuran Background Attachement"
Post a Comment