Gambar Latar Belakang HTML
Gambar latar belakang dapat ditentukan untuk hampir semua elemen HTML.
Gambar Latar Belakang pada elemen HTML
Untuk menambahkan gambar latar belakang pada elemen HTML, gunakan styleatribut HTML dan background-imageproperti CSS:
Contoh
Tambahkan gambar latar belakang pada elemen HTML:
<div style="background-image: url('img_girl.jpg');">
Anda juga dapat menentukan gambar latar belakang di <style>
elemen, di <head>
bagian:
Contoh
Tentukan gambar latar belakang dalam <style>
elemen:
<style>
div {
background-image: url('img_girl.jpg');
}
</style>
Gambar Latar Belakang pada Halaman
Jika Anda ingin seluruh halaman memiliki gambar latar belakang, Anda harus menentukan gambar latar belakang pada <body>elemen:
Contoh
Tambahkan gambar latar belakang untuk seluruh halaman:
<style>
body {
background-image: url('img_girl.jpg');
}
</style>
Pengulangan Latar Belakang
Jika gambar latar lebih kecil dari elemen, gambar akan berulang secara horizontal dan vertikal, hingga mencapai ujung elemen:
Contoh
<style>
body {
background-image: url('example_img_girl.jpg');
}
</style>
Untuk menghindari gambar latar belakang berulang, setel background-repeatproperti ke no-repeat.
Contoh
<style>
body {
background-image: url('example_img_girl.jpg');
background-repeat: no-repeat;
}
</style>
Sampul Latar Belakang
Jika Anda ingin gambar latar belakang menutupi seluruh elemen, Anda dapat mengatur background-sizeproperti ke
cover.
Juga, untuk memastikan seluruh elemen selalu tertutup, atur
background-attachmentproperti kefixed:
Dengan cara ini, gambar latar belakang akan menutupi seluruh elemen, tanpa peregangan (gambar akan mempertahankan proporsi aslinya):
Contoh
<style>
body {
background-image: url('img_girl.jpg');
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
}
</style>
Peregangan Latar Belakang
Jika Anda ingin gambar latar belakang diregangkan agar pas dengan seluruh elemen, Anda dapat mengatur background-sizeproperti ke
100% 100%:
Coba ubah ukuran jendela browser, dan Anda akan melihat bahwa gambar akan melebar, tetapi selalu menutupi seluruh elemen.
Contoh
<style>
body {
background-image: url('img_girl.jpg');
background-repeat: no-repeat;
background-attachment: fixed;
background-size: 100% 100%;
}
</style>
Pelajari Lebih Lanjut CSS
Dari contoh di atas, Anda telah mempelajari bahwa gambar latar belakang dapat ditata dengan menggunakan properti latar belakang CSS.
Untuk mempelajari lebih lanjut tentang properti latar belakang CSS, pelajari Tutorial Latar Belakang CSS kami .