PENGERTIAN
SleepingCodings - Background atau latar belakang pada sebuah halaman website merupakan salah satu bagian yang sangat penting dan wajib di design agar memberikan keajaiban bagi pengunjung seperti tersihir oleh halaman website tersebut karena terlihat menarik dan modern.
Ada beberapa cara agar Halaman Website dapat lebih menarik, yaitu :
1. Mengubah tampilan background pada website dengan menggunakan gambar.
2. Mengubah tampilan background pada website dengan menggunakan warna.
Tentunya Pengubahan Background tersebut menggunakan perantara CSS, Nah untuk mengubah background pada CSS gunakan property background pada CSS, Nah Property Background di sini di gunakan untuk mendeklarasikan bahwa kita akan mengganti background pada halaman website/elemen HTML yang kita inginkan.
Cara Mengubah Background dengan CSS
1. Mengubah Warna Background dengan CSS
index.html
<!DOCTYPE html>
<html>
<head>
<title>SleepingCodings.blogspot.com</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<h1>Penulis suka makan nasi goreng & hobi penulis membaca</h1>
</body>
</html>
style.css
body {
background: lightblue;
color: #292124;
font-family: HACKED;
text-align: center;
font-size: 20px;
}
maka jika kita jalankan di browser akan tampil seperti di bawah ini :
 |
| Gambar 1.1 Mengubah Tampilan Background dg Warna menggunakan CSS |
Nah, pada syntax css di atas kita menentukan bahwa yang akan kita ubah/ kita percantik adalah syntax body, di atas Author memberikan property background dengan value lightblue,dan property color dengan value #fff (white), nah itu property serta value yang Author pakai, di coba dulu yak :v
2. Mengubah Gambar Background Dengan CSS
Nah, untuk memberikan background gambar menggunakan CSS kita perlu bahan seperti gambar yang akan di buat background, file html serta file css nya.
Siapkan alat dan bahan seperti yang di bawah ini :
1. File html = index.html (Nama terserah kalian, disini Author menggunakan nama index.html)
2. File css = style.css ( Nama terserah kalian, disini Author menggunakan nama index.html )
3. Gambar yang akan di jadikan Background
Taruh dalam 1 file yang sama :v agar gak ribet, lihat contoh gambar di bawah :
 |
| Gambar 1.2 Mempersiapkan File Gambar Untuk Background |
 | |
|
<!DOCTYPE html>
<html>
<head>
<title>SleepingCodings</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<h1> Membuat Background Gambar dengan CSS </h1>
</body>
</html>
style.css
body {
background: url("img/hwo.png");
margin: auto;
}
h1{
text-align: center;
color: #fff;
font-family: sans-serif;
}
Nah, perhatikan syntax css di atas, di sinilah perbedaan & kesalahan tmen" ketika mau memakai background gambar background: url(''); . Nah, perbedaannya Mengubah Background dengan Warna yaitu tidak membutuhkan pemakaian perintah url . Nah, sedangkan kesalahan yang sering temen" lakuin & Author itu di saat pemanggilan urlnya, terkadang kita menaruh file gambar tidak satu file dengan file HTMLnya, namun kita masih tetap memanggil dengan cara memanggil nama gambarnya, padahal sebelum masuk ke file gambar ada folder yang menampungnya, seumpama kita menaruh file gambar.png di folder images maka cara memanggilnya yaitu dengan cara background : url('images/gambar.png')
Nah ini hasilnya ketika kita jalankan di web browser :
Nah Gambar berhasil di pasang sebagai background halaman.
KESIMPULAN
Nah, jadi kesimpulannya untuk menambahkan / mengganti background kita memakai CSS untuk mengedit tag yang ada di HTML agar lebih menarik, caranya seperti yang di atas kita tinggal memanggil tag yang ada di HTML seperti body lalu buka kurung kurawal {background: url('');}
Nah, gampang bukan tutorial membuat gambar kali ini, jika temen" msih tetep gagal coba di ulang dari awal dan di pahami lagi step by stepnya maka akan ketemu sendiri salahnya.
Semoga Bermanfaat ~
Wassalamu'alaikum Wr.Wb
No comments:
Post a Comment