Cascading style sheet Gambar untuk background dengan kode html

Diposting oleh b on Senin, 23 Mei 2016 Label: komputer

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{backgroundimage:
url(kiwi.jpg);height:600px;width:800px;}
</style>
</head>
<body>
<div id="utama">
</div>
</body>
</html>

Gambar asli yang digunakan sebagai background dengan ukuran 50px X 50px

Karena ukuran asli gambar adalah 50px X 50px sedangkan ukuran background yang diinginkan adalah 800px X 600px maka gambar akan ditampilkan berulang-ulang sampai terpenuhi ukuran background 800px X 600px seperti pada gambar berikut :

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;}

Cascading style sheet Gambar untuk background dengan kode html

Tidak ada komentar:

Posting Komentar

Mengenai Saya