A. Pengertian
Background css adalah tampilan latar belakang pada suatu halaman web, baik itu bakground gambar maupun warna.

B. Latar Belakang
Karena warna background default adalah warna putih sehingga kurang menarik untuk tampilan web yang kita buat.

C. Maksud dan Tujuan
Dapat memahami dan cara penggunaan backgound CSS.

 D. Alat dan Bahan
  1. Text Editor
  2. Web Browser
E. Pembahasan
Sifat latar belakang CSS digunakan untuk menentukan efek latar belakang untuk elemen.
Background Properti CSS :
  • background-color
  • background-image
  • background-repeat
  • backgound-attachment
  • background-position
Background Color
Properti latar belakang halaman diatur seperti ini, Contoh :
ketikan ditampilkan di browser :

pada CSS ada beberapa cara dalam memberi nilai warna :
  • Dengan mengunkan nama : "red","blue","green".
  • Dengan nilai HEX : "ff0000".
  • Dengan RGB : "rgb(255,0,0)"
Pada contoh dibawah ini elemen <h1>, <p> dan <div> akan diberikan warna latar belakang yang berbeda.
Hasil :

Background Image
Properti background-image menentukan gambar untuk digunkan sebagai latar belakang suatu elemen. Secara default, gambar diulang sehinggan mencakup seluruh elemen.
Gambar latar belakang untuk halaman dapat diatur seperti ini :

Hasil :

Background Image - Repeat Horizontal atu Vertikal
Secara default, background-image properti mengulangi gambar secara horizontal dan vertikal. Beberapa gambar harus diulang dan akan hasilnya akan telihat tidak rapi. Seperti contoh :



Hasil :



Jika gambar diatas diulang hannya horizontal (background-repeat: repeat-x;), latar belakang akan terlihat lebih bagus.

Hasil :

Background Image - Mengatur Posisi dan no-repeat
Menampilkan Latar belakang hanya dengan sekali juga ditentukan oleh properti background-repeat dan mengatur posisi gambar tersebut. Contoh :


Background Image - Fixed Position
Untuk menentukan bahwa gambar latar belakang harus tetap (tidak akan gulir dengan sisa halaman), menggunakan properti background-attachment :

Background Image - menyingkat properti
Untuk mempersingkat kode, juga mungkin untuk menentukan semua properti background dalam satu properti tunggal. untuk memperpendek properti background-image :


Bila menggunakan Shortand urutan properti adalah :
  • background-image
  • background-repeat
  • background-attachment
  • background-position
F. Refrensi

Semoga bermanfaat Wassalmualaikum Wr Wb.

TAGS : |