Sebelumnya saya juga sudah membahas tentang mengubah latar belakang dengan warna, sekarang kita akan melanjutkannya dengan mengubah latar belakang atau background dengan gambar, dan tentunya memakai CSS (cascadding style sheet). Untuk menggunakannya cukup simple, kita hanya menggunakan tambahan value “url” pada property background.
Property penuh untuk mengubah background dengan gambar
Background : url (…..lokasi_dan_nama_gambar.jpg…(png/apapun)…);
Jika disisipkan kedalam tag <style> dengan selector body + nama gambar “bg.jpg “, maka akan tampak seperti berikut ini.
<style>
Body {background : url(bg.jpg) ; }
</style>
Perhatikan pada url, pastikan gambar di simpan di lokasi yang sama dengan penyimpanan file .html/css. Sekarang mari kita konfigurasikan dengan file html.
<html>
<head>
<style type="text/css">
body {background :url(bg.jpg);}
p {background:white;}
</style>
</head>
<body>
untuk membuat background atau latar belakang gambar, cukup tambahkan background:dan gambar yang dipilih;
<p>
<br/><br/>
ini adalah tutorial selanjutnya yaitu dengan menambahkan background bergambar. kita menggunakan kode background : dan url (), maka ini akan berubah menjadi latar belakang gambar, bagaimana jika kita gunakan warna puti sebagai latar belakngnya pada paragraf.
<br/><br/><br/>
</p>
<br/>
informasi selanjutnya saya akan bahas di tutorial lainnya<br/>
</body>
</html>
Silahkan simpan dengan nama “bg.html” atau sesuka anda, yang terpenting ujung file harus pakai “.html”. tampilan hasilnya akan tampak seperti gambar berikut :
Penjelasan kode :
- <html> merupakan tag awal untuk mendeklarasikan bahwa ini adalah file html.
- </html> merupakan tag penutup untuk mendeklarasikan bahwa ini adalah tag penutup file html.
- <head> dan <head> merupan kode tag untuk menyimpan berbagai data, seperti <title>, tag meta <meta>, atau kode JavaScript, bahkan beberapa iklan automatis seperti google adsense juga dipasang disini.
- <style> dengan </style> untuk membuat design css
- Body / P dalam tag <style> merupakan selector yang menyatakan perintah bahwa area tersebut yang akan diperindah.
- Background : url(lokasi_gambar.jpg) merupakan property untuk mengubah latar belakang halaman. Perlu diingat bahwa pada tutorial ini, gambar disimpan dilokasi yang sama. Saya sendiri menggunakan gambar bernama bg.jpg, jika anda menggunakan gambar dengan naman “joni.png” atau semacamnya, maka tuliskan nama gambar tersebut seperti “backround: url(joni.png);“. Jika anda ingin menyimpan gambar terpisah, buatlah folder misalnya folder “gambar”, lalu simpan file tersebut dalam folder gambar. Setelah itu, tulis dalam propertynya menjadi “backround: url(gambar/joni.png);”
- background:white merupakan background berwarna putih.
- <body> dan <body> merupakan penampil isi halaman
- <p> merupakan arti dari paragraf, diakhiri dengan </p>
- <br/> merupakan garis baru
Selesai, mari baca lagi