Belajar CSS Part 3 : Mengubah Background Dengan CSS
MENGUBAH BACKGROUND DENGAN CSS
Background atau Latar Belakang pada websire 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.
CARA MENGUBAH BACKGROUND DENGAN CSS
Pada tutorial kali ini akan dijelaskan bagaimana cara merubah Background menggunakan CSS. Pertama siapkan dulu file htmlnya namai terserah sobat disini saya menamainya index.html dan buatlah file css disini saya menaiamnya style.css
MERUBAH WARNA BACKGROUND
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;
}
 |
| Hasilnya seperti berikut |
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
MENGUBAH BACKGROUND DENGAN 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
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);
 |
| Hasilnya seperti berikut |
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 : Malas Ngoding
TUTORIAL CSS LAINYA
- Belajar CSS Part 1 : Pengertian dan Mengenal CSS
- Belajar CSS Part 2 : Cara Penulisan CSS
- Belajar CSS Part 3 : Mengubah Background Dengan CSS
- Belajar CSS Part 4 : Margin dan Padding CSS
- Belajar CSS Part 5 : Mengatur Font Dengan CSS
- Belajar CSS Part 6 : Mengatur Hyperlink Dengan CSS
- Belajar CSS Part 7 : Mengatur Format Text Dengan CSS
- Belajar CSS Part 8 : Mengenal Position CSS
- Belajar CSS Part 9 : Mengatur Border Dengan CSS
- Belajar CSS Part 10 : Mengatur List Dengan CSS
- Belajar CSS Part 11 : Mengatur Float Dengan CSS
Tidak ada komentar :
Posting Komentar