Tutorial Merubah Background Dengan CSS
Background atau latar belakang dalam sebuah website adalah salah satu bagian elemen peting dalam sebuah desain sehingga dapat menghasilkan website yang menarik dan modern, ada beberapa cara dalam mebuat background atau latar belakang. Kali ini kita akan belajar memberikan warna background dan mengubah gambar menjadi background dengan CSS untuk membuatnya kita akan menggunakan property background.
Membuat Warna Backround dengan CSS
Untuk memulai praktek cara merubah background dengan CSS pertama kita buat dua buah file yakni file index.html dan kemudian buatlah file yang kedua style.css
Yup ok sahabat kita langsung praktek untuk file index.html buatlah kode seperti dibawah.
<!DOCTYPE html>
<html>
<head>
<title>Merubah warna background</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<h1>Belajar mengubah warna background dengan CSS</h1>
</body>
</html>
Selanjutnya buat kode pada style.css sebagai berikut :
body{
background: gray;
color: white;
}
Kemudian jalankan file yang telah kita buat tadi Hasil tampilan dari kode diatas sebagai berikut:
Hasilnya kita telah merubah background dengan warna abu-abu, dimana property body background: gray memberikan warna abu-abu, dan color: white; memberikan warna putih pada teks tulisan. Anda bisa mencoba berbagai warna background dengan menganti-ganti pada property background.
Mengubah Gambar Menjadi Background/Halaman Latar Belakang Web
Selanjutnya bagaimana caranya kita menyisipkan gambar pada backround? Langkah pertama anda persiapkan sebuah gambar yang akan digunakan sebagai background kemudian letakan gambar satu folder pada css yang kita buat, kemudian buat file index1.html dan style.css
Masukan kode pada file index.html sebagai berikut
<!DOCTYPE html>
<html>
<head>
<title>Menambah background gambar dengan CSS</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<h1>Tutorial memasukan gambar pada background dengan CSS</h1>
</body>
</html>
Kemudian buat file style.css dan maskan kode berikut :
body{
background: url('background.jpg');
color: black;
}
Hasilnya terlihat gambar telah menjadi background, dimana nama file dan tipe gambar disesuaikan namanya pada background: url (‘ nama dan tipe gambar yang akan dijadikan background ‘) dan pada property color black membuat warna teks judul menjadi hitam.
Demikian tutorial Merubah Bacground Dengan CSS, bagaimana mudah kan sahabat cara membuat background atau latar belakang baik dengan warna maupun dengan gambar, semoga bisa bermanfaat.
