Assalamu'alaikum Wr Wb.
Dalam pertemuan kali ini, saya akan membahas mengenai Background dengan CSS.
PENGERTIAN
Background atau Latar Belakang pada website merupakan bagian yang wajib diperhatikan untuk membuat sebuah website yang menarik dan modern. Ada beberapa cara dalam mempercantik Background pada sebuah website. Yaitu dengan menggunakan background yang berupa gambar dan menggunakan background yang berupa warna dengan bantuan CSS. Property Background selian bisa merubah body halaman website bisa juga untuk merubah background pada elemen HTML.
Sifat Background CSS digunakan untuk menentukan efek background untuk elemen.
Properti Background CSS:
-warna background
-gambar background
PENGERTIAN
Background atau Latar Belakang pada website merupakan bagian yang wajib diperhatikan untuk membuat sebuah website yang menarik dan modern. Ada beberapa cara dalam mempercantik Background pada sebuah website. Yaitu dengan menggunakan background yang berupa gambar dan menggunakan background yang berupa warna dengan bantuan CSS. Property Background selian bisa merubah body halaman website bisa juga untuk merubah background pada elemen HTML.
Sifat Background CSS digunakan untuk menentukan efek background untuk elemen.
Properti Background CSS:
-warna background
-gambar background
Background Warna
Berikut cara merubah warna background perhatikan dan pahami
index.html
<!DOCTYPE html>
<html>
<head>
<title>Merubah Warna Background</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<h1>Tutorial mengubah warna background dengan CSS</h1>
<h1>Script_Kiddies</h1>
</body>
</html>
style.css
body{
background-color: red;
color: white;
}
Untuk merubah warna background saya gunakan " background-color: orange" jadi saya rubah backgroundya dengan warna orange, dan "color: white" adalah untuk merubah warna fontnya menjadi warna putih
Background Gambar
OK Sekarang akan saya jelaskan bagaimana cara mengubah background sebuah website dengan menggunakan gambar. Pertama sobat harus menyediakan file gambar untuk dijadikan gambar pada website sobat. Disini saya sudah menyediakan gambar untuk saya jadikan background dan saya letakkan satu folder dengan file kerja saya agar tidak kebingungan nantinya. Nama file gambar saya adalah background.jpg
Image
index.html
<!DOCTYPE html>
<html>
<head>
<title>Merubah Warna Background</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<h1>Background Gambar Dengan CSS</h1>
<h1>Script_Kiddies</h1>
</body>
</html>
style.css
body{
background: url(background.jpg);
color: white;
}
Perhatikan syntax kode diatas, untu merubah gambar background menggunakan
background: url(background.jpg);
Background berhasil dirubah, jika nama file gambar sobat bukan "background.jpg" maka rubah saja sesuai dengan nama file gambar sobat. Contoh nama file gambar sobat adalah bg1.png maka kode syntaxnya " background: url(bg1.png) " . Satu lagi usahakan file gambar satu folder dengan file kerja sobat agar tidak susah untuk menulis lokasi gambarnya
PENUTUP
Jadi kode syntax untuk merubah background dengan CSS adalah " background: " mudah bukan ? saran saya jangan copas script saya tadi tapi ketiklah satu persatu untuk mendapatkan pemahaman. Jika sobat mengalami masalah silahkan berikan komentar, Sekian Terima Kasih.
REFERENSI
No comments:
Post a Comment