Cascading style sheet Gambar untuk background
Seperti penambahan warna
latar, penambahan gambar latar belakang juga dilakukan dengan menggunakan dua
properti, yaitu background dan background-image. Nilai yang diisikan untuk
properti ini ialah url dari gambar, relatif terhadap file CSS, sama seperti
pada penambahan font.
div { background: url(“latar.png”);
background-image: url(“latar.png”);}
kesalahan tersebut
bekerja, simpan dan jalankan kode Namun, penambahan gambar dengan cara di atas
akan memberikan masalah ketika ukuran gambar tidak sama dengan ukuran elemen.
Gambar akan ditampilkan berulangkali, secara horizontal maupun vertikal, jika
ukuran elemen lebih besar dari ukuran gambar. Untuk dapat melihat
bagaimana berikut :
<html>
<head>
<title>Background Image Goes
Wrong</title>
<style type="text/css">
#utama{background-image:url(kiwi.jpg);height:600px;width:800px;}
</style>
</head>
<body>
<div id="utama">
</div>
</body>
</html>
Adakalanya
perulangan tampilan gambar otomatis ini tidak diinginkan. Untuk itu dapat
menggunakan properti background-repeat untuk mengatur bagaimana perulangan kode
ingin dilakukan. Terdapat empat nilai yang dapat diisikan pada
properti background-repeat, yaitu repeat, no-repeat, repeat-x, dan repeat-y.
Seperti namanya, no-repeat menghilangkan perulangan, repeat-x memberikan
perulangan hanya pada sumbu x (horizontal), dan repeat-y memberikan perulangan
hanya pada sumbu y (vertikal). Listing Kode CSS di bawah akan menghilangkan
perulangan pada sumbu x dan sumbu y, sehingga kiwi,jpg hanya akan ditampilkan
satu kali :
#utama {background-image:
url(kiwi.jpg);
background-repeat: no-repeat;
height: 600px;width: 800px;}
