Saat membuat kode situs web, menggunakan gambar sebagai gambar latar belakang situs web berbeda dengan menyisipkan gambar dalam HTML menggunakan elemen img
Untuk menggunakan gambar sebagai latar belakang situs web Anda, Anda akan menggunakan CSS
Ini sebuah contoh
<!DOCTYPE html> <html lang="en"> <head> <link rel="stylesheet" href="style.css"> <title>Background Image</title> </head> <body> <h1>Background image</h1> </body> </html>h1{ text-align: center; }Kami memiliki dua blok kode di atas — kode HTML menampilkan teks bertuliskan "Gambar latar belakang" di halaman web sementara kode CSS memusatkan teks di halaman
Untuk menambahkan gambar wallpaper ke situs web — yang menutupi seluruh halaman — Anda harus menulis beberapa aturan CSS untuk elemen body. Begini caranya
body{ background-image: url('bg-image.jpg'); }Pada kode di atas, kami menggunakan properti background-image untuk menambahkan gambar ke badan halaman web. Jalur/lokasi gambar diteruskan sebagai parameter ke fungsi url(). h1{ text-align: center; }_0
Inilah tampilan halaman web sekarang
Bagaimana jika Gambar Latar Belakang Lebih Kecil Dari Jendela Peramban?
Dalam situasi di mana gambar lebih kecil dari browser, gambar diulangi beberapa kali untuk menutupi ruang yang tersisa
Pengulangan ini tidak terlihat bagus untuk setiap gambar. Inilah tampilan versi lebih kecil dari gambar yang digunakan di bagian sebelumnya di browser
Gambar telah dibagi menjadi empat bagian yang tidak rata. Kecuali jika ini adalah efek yang Anda cari, Anda dapat memperbaikinya menggunakan properti h1{ text-align: center; }1
Berikut cara memperbaiki masalah pengulangan gambar
body{ background-image: url('bg-image-small.jpg'); background-repeat: no-repeat; }Dalam kode di atas, kami menetapkan nilai h1{ text-align: center; }_2 ke properti h1{ text-align: center; }1
Inilah tampilan halaman web sekarang
Gambar tidak lagi ditampilkan di seluruh halaman, tetapi kami memiliki masalah baru — gambar tidak lagi menutupi seluruh halaman.
Untuk memperbaikinya, kami menggunakan properti h1{ text-align: center; }_4 dan h1{ text-align: center; }5
body{ background-image: url('bg-image-small.jpg'); background-repeat: no-repeat; background-size: cover; background-attachment: fixed; }Menyetel nilai properti h1{ text-align: center; }4 menjadi h1{ text-align: center; }7 membuat gambar menutupi seluruh elemen (body/seluruh halaman dalam kasus kita)
Dengan nilai h1{ text-align: center; }_9 dari properti h1{ text-align: center; }5, posisi gambar tetap. Dengan cara ini tetap di posisi yang sama bahkan ketika Anda menggulir halaman
Inilah gambarnya sekarang
Kelemahan dari merentangkan gambar kecil untuk menutupi seluruh halaman adalah gambar kehilangan kualitas dan menjadi buram saat direntangkan. Dalam hal ini, Anda harus mempertimbangkannya sebelum menggunakan gambar kecil sebagai gambar latar belakang situs web Anda
Ringkasan
Pada artikel ini, kami berbicara tentang menambahkan gambar wallpaper ke situs web
Anda dapat menambahkan gambar latar belakang ke situs web Anda menggunakan properti CSS background-image
Kita juga belajar cara menggunakan properti latar belakang CSS lainnya seperti h1{ text-align: center; }1, h1{ text-align: center; }4, dan h1{ text-align: center; }5
Selamat mengkode
IKLAN
IKLAN
IKLAN
Biografi penulis ini dapat ditemukan di artikelnya
Jika Anda membaca sejauh ini, tweet ke penulis untuk menunjukkan bahwa Anda peduli. Tweet terima kasih
Belajar kode secara gratis. Kurikulum open source freeCodeCamp telah membantu lebih dari 40.000 orang mendapatkan pekerjaan sebagai pengembang. Memulai
- Add a background image using the background image attribute inside the tag.
- Tambahkan gambar latar belakang menggunakan atribut gaya HTML
Pada artikel ini, kita akan mempelajari dua metode untuk menambahkan gambar latar belakang ke halaman web
1. Using the background-image attribute inside the tag
In this method we will add a background image is using the background image attribute inside the tag.
Sintaksis
Contoh
HTML
<!DOCTYPE html>
<html lang="en">
<head>
________25______0<<2<3<2>
<6head>
<html0 html1=html3 >
________25______0<html7html8html7>
<6html0>
<6html>
Keluaran
2. Menggunakan atribut gaya HTML
Dalam metode ini, kami akan menambahkan gambar latar belakang menggunakan atribut gaya HTML untuk elemen tertentu di halaman web
Sintaksis