Background-Image di CSS
Properti background-image menentukan gambar untuk digunakan sebagai latar belakang elemen.
Secara default, gambar diulang sehingga menutupi seluruh elemen.
Contoh
Gambar latar untuk halaman dapat diatur seperti ini:
<!DOCTYPE html> <html> <head> <style> body { background-image: url("https://dosenit.com/wp-content/uploads/2020/10/ilustrasi-hutan_1.jpg"); } </style> </head> <body> <h1 style="color:Tomato;">Hello World!</h1> <p style="color:blue;"> Halaman ini memiliki gambar sebagai background! </p> </body> </html>
Contoh
Contoh ini menunjukkan kombinasi teks dan gambar latar yang buruk. Teksnya sulit dibaca:
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-image: url("https://dosenit.com/wp-content/uploads/2020/10/thumb-1920-744908.jpg");
}
</style>
</head>
<body>
<h1>Hello World!</h1>
<p> Teks ini tidak mudah dibaca pada gambar latar ini. </p>
</body>
</html>
