Belajar Koding HTML & CSS Bagian 5: Membuat Background Color & Image
.png)
Pada Pembelajaran Kali ini Admin akan membuat Desain Html & CSS Membuat Background Color dan Image.Untuk menambahkan background pada elemen HTML, Anda dapat menggunakan properti CSS seperti background-color untuk warna latar belakang dan background-image untuk gambar latar belakang. Berikut adalah penjelasan dan contoh penggunaannya:
1. Memberikan Warna Latar Belakang
Gunakan properti background-color untuk menetapkan warna latar belakang pada elemen.
Contoh:
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<title>Contoh
Background Warna</title>
<style>
body {
background-color: #8f8686; /* Warna abu-abu Tua Kecoklatan */
}
</style>
</head>
<body>
<h1>Selamat
datang di halaman saya!</h1>
</body>
</html>
Dalam contoh di atas, elemen <body> diberi warna latar belakang abu-abu muda menggunakan kode warna heksadesimal #8f8686
2. Menambahkan Gambar Latar Belakang
Gunakan properti background-image untuk menetapkan gambar sebagai latar belakang elemen.
Contoh:
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<title>Contoh
Background Gambar</title>
<style>
body {
background-image:
url('background.jpg'); /* Ganti 'background.jpg' dengan path gambar Anda */
background-repeat:
no-repeat; /* Mencegah pengulangan gambar */
background-attachment:
fixed; /* Membuat gambar tetap saat menggulir halaman */
background-size:
cover; /* Menyesuaikan ukuran gambar agar menutupi seluruh area */
}
</style>
</head>
<body>
<h1>Selamat
datang di halaman saya!</h1>
</body>
</html>
Penjelasan properti tambahan:
- background-repeat:
no-repeat;
mencegah gambar latar belakang diulang.
- background-attachment:
fixed;
membuat gambar tetap di tempat saat halaman digulir.
- background-size:
cover;
memastikan gambar menutupi seluruh area elemen.
- Properti-properti
ini membantu mengontrol tampilan dan perilaku gambar latar belakang sesuai
kebutuhan desain Anda
REFERENSI
0 Response to "Belajar Koding HTML & CSS Bagian 5: Membuat Background Color & Image "
Post a Comment