Mengubah Background Dengan CSS

Background atau latar belakang pada sebuah halaman website merupakan salah satu bagian yang wajib di design untuk menghasilkan sebuah halaman website yang terlihat menarik dan elegan. Ada beberapa cara mempercantik background atau latar belakang website, bisa mempercantik background website dengan menggunakan gambar, jika tidak ingin menggunakan gambar bisa juga dengan mengubah warna background dengan bentuan CSS.

Untuk mengubah background dengan CSS, gunakan property background pada CSS, property background selain di gunakan untuk mengubah background pada body website, bisa juga di gunakan untuk mengubah gambar background pada sebuah element HTML, yang di inginkan.

Cara mengubah background dengan CSS ini akan saya jelaskan bagaimana cara mengubah background dengan menggunakan CSS. Langsung saja masuk ke pembahasan mengubah background menggunakan CSS, buat sebuah file HTML dengan nama file htmlnya terserah kalian, disini saya membuat dengan nama latihan.html, kemudian buat sebuah file CSS dengan namanya juga terserah kalian tapi di sini saya membuat file css dengan nama latihan.css

Mengubah Warna Background Dengan CSS

Perhatikan penjelasan berikut ini untuk cara mengubah warna background dengan menggunakan CSS.

Saya disini membuat file HTML yang berisi sebagai berikut :

Dan saya disini membuat file CSS yang berisi sebagai berikut :

Nah setelah itu simpan kedua file HTML dan juga CSSnya lalu buka latihan.html dengan web browser maka hasilnya akan seperti dibawah ini :

Pada syntax CSS di atas kita menentukan body yang akan di modifikasi kemudian memberikan property background dengan value green ( Biru ) dan warna color font dengan warna white ( Putih ).

Mengubah Gambar Background Dengan CSS

Pada sub judul mengubah gambar background dengan CSS ini akan dijelaskan bagaimana cara mengubah background sebuah halaman website dengan menggunakan gambar, oleh sebab itu kalian harus menyediakan sebuah file gambar untuk dijadikan background untuk halaman website kalian, di sini saya sudah menyediakan sebuah gambar sederhana yang akan saya jadikan gambar pada background. Letakkan file gambar satu folder dengan file HTML dan CSS agar tidak kebingungan nantinya, nama file gambar saya adalah background.jpg

Saya disini membuat file HTML yang berisi sebagai berikut :

Dan saya disini membuat file CSS yang berisi sebagai berikut :

Perhatikan pada syntax CSS di atas, untuk membuat gambar background gunakan syntax :

Dan Perhatikan juga pada syntax CSS di atas, saya menggunakan :

Saya menggunakan no-repeat agar gambar tidak berulang-ulang, karena ukuran gambar tidak penuh pada layar, maka dari itu dia akan berulang” jika tidak menggunakan no-repeat. Background-repeat dibagi menjadi 3 yaitu repeat-x, repeat-y, dan no-repeat. Fungsi dari fungsi dari ketiga itu adalah :

  • repeat-x | Perulangan secara horizonta
  • repeat-y | Perulangan secara vertical
  • no-repeat | Tidak akan melakukan perulangan

Ini contoh background menggunakan no-repeat :

Nah background pun berhasil di pasang, karena gambar ini berukuran kecil maka tampilannya seperti itu !

Mungkin sampai disini dlu tutorial Belajar Dasar CSS Part 3 untuk selanjutnya akan kita sambung di tutorial Belajar Dasar CSS Part 4 !