Belajar Koding HTML & CSS Bagian 6: Membuat Ukuran Background Repeat
.png)
Background repeat adalah properti CSS yang mengatur
bagaimana gambar latar belakang diulang. Properti ini berguna untuk
mengisi ruang kosong pada halaman HTML.
Nilai background-repeat
- repeat: Gambar
diulang secara horizontal dan vertikal
- repeat-x: Gambar diulang secara
horizontal
- repeat-y: Gambar diulang secara
vertikal
- no-repeat: Gambar tidak diulang
- round: Gambar diulang sebanyak
mungkin tanpa terpotong
Penggunaan background-repeat
- Background repeat
sering digunakan saat menggunakan gambar kecil di background
- Background repeat dapat
membiarkan latar belakang mengisi ruang yang digunakan untuk halaman
- Background repeat dapat memastikan bahwa seluruh gambar latar terlihat tanpa terpotong
Dalam HTML dan CSS, Anda dapat mengontrol
pengulangan gambar latar belakang menggunakan properti background-repeat. Properti ini menentukan apakah dan bagaimana gambar latar belakang
diulang dalam elemen.
Nilai Properti background-repeat
- repeat: Gambar diulang baik secara horizontal maupun
vertikal untuk mengisi area elemen. Ini adalah nilai default.
- repeat-x: Gambar hanya diulang secara horizontal.
- repeat-y: Gambar hanya diulang secara vertikal.
- no-repeat: Gambar ditampilkan sekali tanpa pengulangan.
- space: Gambar diulang sebanyak mungkin tanpa
dipotong, dengan ruang kosong yang didistribusikan secara merata di antara
gambar-gambar tersebut.
- round: Gambar diulang dan disesuaikan (diperbesar
atau diperkecil) agar sesuai dengan area elemen tanpa celah.
Contoh Penggunaan
1. Pengulangan Horizontal dan Vertikal (repeat):
<!DOCTYPE html>
<html lang="id">
<head>
<meta
charset="UTF-8">
<title>Contoh
Background Repeat</title>
<style>
body {
background-image:
url('images.jpeg');
background-repeat:
repeat; /* Ganti dengan repeat-x,
repeat-y, atau no-repeat */
background-size:
auto; /* Atur ukuran gambar
(opsional) */
background-position:
top left; /* Posisi awal pengulangan */
}
</style>
</head>
<body>
<h1>Contoh
Background Repeat</h1>
<p>Ini adalah
halaman dengan gambar latar yang diulang.</p>
</body>
</html>
REFERENSI
0 Response to "Belajar Koding HTML & CSS Bagian 6: Membuat Ukuran Background Repeat"
Post a Comment