Tutorial CSS - Cara Mengatur/membuat Background
Assalamuallaikum Wr Wb
Setelah saya sebelumnya telah menulis Tutorial CSS - Mengenal Class dan Id pada Css, kali ini saya akan menuliskan tutorial yang sangat berguna dan juga sangat penting untuk mempercanting web yang kita buat, yaitu Tutorial CSS - Cara membuat atau mengatur background.
Disini kita akan membahas mengenai cara memasukan background gambar, cara memposisikan background, cara membuat background warna, dan lain-lain.
Untuk lebih memahami lebih jauh silahkan simak contoh code berikut :
Keterangan :
Pada background-image:url(logo.jpg), kata "logo.jpg" dapat diganti sesuai dengan gambar background apa yang hendak anda gunakan. Untuk mempermudah letakan gambar yang anda inginkan pada folder yang sama dengan code HTML yang ada save.
Selain code background di atas, anda juga dapat mempercantik atau pun mengatur background menggunakan code-code background di bawah ini :
-Backgorund-color , untuk menentukan warna backgound
-Background-image , untuk menggunakan file gambar sebagai background
-background-repeat , berguna untuk mengatur pengulangan gambar. Secara default, gambar akan diulang hingga memenuhi halaman tetapi anda dapat mengatur nya dengan menggunakan code berikut
-background-repeat: repeat-x , gambar akan di ulang secara horizontal, kiri dan kanan
-background-repeat: repeat-y , gambar akan di ulang secara vertikal, dari atas ke bawah.
-Background-repeat: no=repeat , gambar tidak akan di ulang
-background-position : mengatur posisi gambar apakah gambar berada di tenagh, kiri, kanan atau gabungan dari keduanya
Hasil code CSS di atas dapat dilijat hasilnya sebagai berikut :
Sekian Untuk Tutorial CSS - Cara Mengatur/membuat Background kali ini, Silahkan anda baca Tutorial CSS selanjutnya menganai Cara Merubah Warna Tulisan Teks
Wassalam
Setelah saya sebelumnya telah menulis Tutorial CSS - Mengenal Class dan Id pada Css, kali ini saya akan menuliskan tutorial yang sangat berguna dan juga sangat penting untuk mempercanting web yang kita buat, yaitu Tutorial CSS - Cara membuat atau mengatur background.
Disini kita akan membahas mengenai cara memasukan background gambar, cara memposisikan background, cara membuat background warna, dan lain-lain.
Untuk lebih memahami lebih jauh silahkan simak contoh code berikut :
<html>
<head>
<title>Tutorial CSS - Cara Mengatur/membuat Background</title>
<style>
body {background-color : red;
background-image:url(logo.jpg);
background-position: center center}
</style>
</head>
<body>
</body>
</html> Keterangan :
Pada background-image:url(logo.jpg), kata "logo.jpg" dapat diganti sesuai dengan gambar background apa yang hendak anda gunakan. Untuk mempermudah letakan gambar yang anda inginkan pada folder yang sama dengan code HTML yang ada save.
Selain code background di atas, anda juga dapat mempercantik atau pun mengatur background menggunakan code-code background di bawah ini :
-Backgorund-color , untuk menentukan warna backgound
-Background-image , untuk menggunakan file gambar sebagai background
-background-repeat , berguna untuk mengatur pengulangan gambar. Secara default, gambar akan diulang hingga memenuhi halaman tetapi anda dapat mengatur nya dengan menggunakan code berikut
-background-repeat: repeat-x , gambar akan di ulang secara horizontal, kiri dan kanan
-background-repeat: repeat-y , gambar akan di ulang secara vertikal, dari atas ke bawah.
-Background-repeat: no=repeat , gambar tidak akan di ulang
-background-position : mengatur posisi gambar apakah gambar berada di tenagh, kiri, kanan atau gabungan dari keduanya
Hasil code CSS di atas dapat dilijat hasilnya sebagai berikut :
Sekian Untuk Tutorial CSS - Cara Mengatur/membuat Background kali ini, Silahkan anda baca Tutorial CSS selanjutnya menganai Cara Merubah Warna Tulisan Teks
Wassalam
9 komentar — Skip to Comment
tutorialnya sangat bermanfaat gan...
terima kasih infonya.
Bermanfaat bgt postingannya
apakah ada cara untuk beckgroundnya gak ikut bergulir waktu kita scroll?
background maksudnya hehe
.. kalo pengen sehalaman penuh gimana?!? ..
pakai no repeat agan cahyaning .
dicoba aja pakai coding diatas.
semoga membantu
nggak bisa
Makasih untuk infonya ;)
Poskan Komentar — or Back to Content