Mengubah Background Html Menggunakan CSS

Diartikel ini kita akan membahas juga seputar CSS yang dapat membuat website lebih menarik.CSS adalah kepanjangan dari Cascading Style Sheet yang berfungsi untuk mengatur tampilan elemen yang tertulis dalam bahasa markup. Fungsi lain dari CSS yakni untuk memisahkan konten dari tampilan visual dalam sebuah website.

Pada dasarnya HTML dan CSS memiliki kedekatan yang sangat erat, sehingga kinerja keduanya tidak dapat dipisahkan. HTML sendiri merupakan bahasa markup dan CSS memperbaiki style, kedua bahasa pemrograman ini harus terus beriringan. Selain pada urusan teknis, CSS berpengaruh juga pada tampilan sebuah website.

Mengubah Background Menjadi Berwarna Dengan CSS

Lanjut ketopik artikel, dan sebelum memulai silahkan persiapkan telebih dahulu folder sebagai tempat menyimpan file yang kita kerjakan.

Mengubah Background Html Menggunakan CSS

Pada artikel ini saya menyimpan di Document\Belajar HTML\Background, setelah kamu berhasil membuat folder silahkan buka sublime text dan kita akan membuat file .css

body{
  background: blue;
  color: white;
}

Simpan file tersebut di Document\Belajar HTML\Background dengan nama style.css
Lanjut ke langkah berikutnya kita akan membuat file index.html sebagai halam utama saat di akses kamu bisa gunakan tombol pintasan Ctrl + N atau Klik File Kemudian New File

<html>
 <head>
  <title> Merubah Warna Background Dengan CSS</title>
   <link rel="stylesheet" type="text/css" href="style.css">
 </head>
<body>
 <h1>Tutorial Merubah Warna Background Dengan CSS</h1>
</body>
</html>

Jika kamu berhasil membuat file index.html dan style.css sampai disini kamu bisa simpan dan lihat hasil di browser kamu.

Mengubah Background Bergambar Dengan CSS
Simpan terlebih dahulu file gambar di lokasi yang sama dengan berkas index.html yaitu di Document\Belajar HTML\Background sehingga tidak menyusahkan kamu saat melakukan pemanggilan gambar

Silahkan buka kembali file style.css yang telah kamu buat sebelumnya dan lakukan perubahan menjadi

 body{
 background: url(bc.jpg) no-repeat fixed;
 -webkit-background-size: 100% 100%;
 -moz-background-size: 100% 100%;
 -o-background-size: 100% 100%;
 background-size: 100% 100%;
 color: blue;
}

Dengan demikian maka tampilan pada halaman html kamu akan berubah juga dengan tampilan gambar bc.jpg yang telah di simpan di folder Document\Belajar HTML\Background

Menurut saya ini cukup mudah dan sangat menyenagkan untuk di pelajari, dan untuk kamu jangan lupa juga bergabung di chanel telegram wio code untuk mendapatkan informasi dan tutorial menarik lainnya