Metode penulisan dengan menggunakan repeat dimaksudkan sebagai perintah supaya gambar ditampilkan secara berulang dengan dasar dan tujuan supaya dengan image sekecil mungkin bisa digunakan untuk memenuhi keseluruhan bidang yang harus ditutup dengan background. Dengan cara ini beban image yang dipergunakan menjadi jauh lebih kecil bila dibandingkan dengan apabila kita menggunakan gambar dengan ukuran yang luasnya sesuai dengan lebar background yang sebenarnya.
Repeat image vertically dimaksudkan supaya gambar berulang secara vertikal atau dari atas ke bawah. Repeat image horizontally digunakan untuk pengulangan gambar dari kiri ke kanan atau sebaliknya.
- background: #fff url(http://gubhugreyot-images.googlecode.com/files/img_gubhugreyot-pakpung.jpg) repeat-y;
- background: blue url(http://gubhugreyot-images.googlecode.com/files/img_gubhugreyot-pakpung.jpg) repeat-y;
- background-image: url(http://gubhugreyot-images.googlecode.com/files/img_gubhugreyot-pakpung.jpg) repeat-y;
- background: #fff url(http://gubhugreyot-images.googlecode.com/files/img_gubhugreyot-pakpung.jpg) repeat-x;
- background: blue url(http://gubhugreyot-images.googlecode.com/files/img_gubhugreyot-pakpung.jpg) repeat-x;
- background-image: url(http://gubhugreyot-images.googlecode.com/files/img_gubhugreyot-pakpung.jpg) repeat-x;
Update » Senin PAHING, January, 30, 2012
Repeat image vertically dimaksudkan supaya gambar berulang secara vertikal atau dari atas ke bawah. Repeat image horizontally digunakan untuk pengulangan gambar dari kiri ke kanan atau sebaliknya.
Contoh Cara penulisan KODE :
1. Repeat Image Vertically :
- background: #fff url(http://gubhugreyot-images.googlecode.com/files/img_gubhugreyot-pakpung.jpg) repeat-y;
- background: blue url(http://gubhugreyot-images.googlecode.com/files/img_gubhugreyot-pakpung.jpg) repeat-y;
- background-image: url(http://gubhugreyot-images.googlecode.com/files/img_gubhugreyot-pakpung.jpg) repeat-y;
2. Repeat Image Horizontally :
- background: #fff url(http://gubhugreyot-images.googlecode.com/files/img_gubhugreyot-pakpung.jpg) repeat-x;
- background: blue url(http://gubhugreyot-images.googlecode.com/files/img_gubhugreyot-pakpung.jpg) repeat-x;
- background-image: url(http://gubhugreyot-images.googlecode.com/files/img_gubhugreyot-pakpung.jpg) repeat-x;
Silahkan juga buka Tutorial lain yang sangat menarik dan patut di ikuti sampeyan semua. Akses melalui link di bawah ini :
Update » Senin PAHING, January, 30, 2012
» Happy Blogging - gubhugreyot «
silahkan tulis sebuah komentar!
gubhug reyot