Lebak Cyber Kursus Pemrograman Gratis
Mengubah Background dengan CSS
lebakcyber.net – Mengubah background dengan CSS. Background atau yang biasa dikenal juga dengan istilah latar belakang didalam sebuah halaman website menjadi salah satu bagian yang wajib diperhatikan agar dapat membuat sebuah halaman website yang modern dan juga menarik.
Ada beberapa cara untuk mempercantik tampilan background pada halaman HTML yang dibuat, seperti misalnya menambahkan gambar atau dengan mengubah warna background dengan menggunakan perintah CSS.
Agar dapat merubah background dengan menggunakan CSS, kita harus menggunakan property background pada CSS. Selain dapat digunakan untuk mengubah background pada halaman HTML suatu website, dapat juga digunakan untuk mengubah gambar background di elemen HTML sesuai dengan yang diinginkan.
Cara Merubah Background Menggunakan CSS
Oke sekarang langsung saja kita masuk ke pembahasan inti, yaitu bagaimana cara mengubah background pada HTML dengan menggunakan CSS.
- Buat sebuah file HTML baru dengan nama misalnya css-background.html. Lalu buat sebuah file css dengan nama style.css.
- Selanjutnya perhatikan perintah dibawah ini yang dimasukan kedalam file style.css dan juga css-background.html untuk merubah warna background pada halaman HTML dengan menggunakan CSS :
Code style.css
body{
background: red;
color: white;
}
Code css-background.html
<html>
<head>
<title>Belajar CSS - Lebak Cyber</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<h1>Belajar CSS Bersama lebakcyber.net</h1>
<h2>Belajar merubah warna background menggunakan CSS</h2>
</body>
</html>
3. Nanti setelah dijalankan hasilnya seperti pada gambar dibawah ini :
4. Bisa dilihat pada syntax perintah style.css kita menentukan body yang diubah property backgroundnya dengan nilai red atau merah dan untuk warna font kita ubah menjadi white atau putih.
Secara otomatis file HTML tersebut akan memanggil file CSS yang telah diedit sesuai dengan keinginan kita lalu menerapkannya pada halaman HTML yang dituju untuk dirubah warna backgroundnya.
Merubah Gambar Background HTML Menggunakan CSS
Sekarang kita akan membahas mengenai bagaimana cara mengganti background pada file HTML dengan sebuah gambar menggunakan CSS. Sebelumnya kita harus menyediakan gambarnya terlebih dahulu untuk nanti dijadikan sebuah background.
Biar gak ribet, silahkan simpan gambar yang ingin dijadikan sebagai background pada halaman HTML tersebut di dalam folder yang sama dengan file HTML tersebut disimpan.
Selanjutnya ubah file style.css menjadi seperti dibawah ini :
body{
background: url('lebakcyber.jpg');
color: black;
width: 100%
}
Nanti setelah dijalankan file HTMLnya, hasinya akan tampak seperti pada gambar dibawah ini :
Oke sekarang background pada halaman HTML sudah berubah menjadi gambar sesuai dengan yang kita inginkan.
Semoga tutorial sederhana ini dapat bermanfaat dan jugan lupa untuk terus berkunjung ke lebakcyber.net untuk mendapatkan tutorial belajar CSS lainnya.
