Pengaturan Background Dengan CSS

Untuk pengaturan background pada halaman web dengan CSS, kita menggunakan properti background. Contoh pendeklarasiannya:
body{background: #cd23fa url('gambar.png') no-repeat fixed center;}
Properti dari CSS yang digunakan untuk mengatur background antara lain:

• background-color
• background-image
• background-repeat
• background-attachment
• background-position

Sekarang mari kita pelajari satu-persatu:

• background-color
  
  Properti background-color digunakan untuk mengatur warna background dari sebuah elemen. Untuk mengatur warna background dari halaman web kita, selector yang digunakan adalah body. Berikut adalah contoh penulisannya:

  body{background-color:#54de12;}

  
  Nilai atau value dari background-color bisa berisi:
  nama - berisi nama warna, misal: “blue”
  RGB - nilai dari RGB, misal: “rgb(244,0,0)”
  Hex – kode hexa warna, misal: “#ffdaec”
  properti background-color bisa juga digunakan untuk mengatur warna dari elemen lain. Pada contoh di bawah ini, elemen p, div, dan h1 memiliki warna yang berbeda meskipun berada pada satu halaman web.

  h1 {background-color:#b3b3b3;}
  p {background-color:blue;}
  div {background-color:rgb(300,0,0);}

• background-image
  
  Properti background-image digunakan untuk menampilkan gambar menjadi background sebuah elemen. Pada settingan default, gambar akan ditampilkan berulang-ulang sehingga memenuhi seluruh elemen. Untuk mengatur gambar pada halaman web kita, bisa kita tulis:

  body{background-image:url('gambar.png');}

  Value url berisi alamat tempat kita meletakkan gambar.
• background-repeat
  Properti background-repeat mengatur perulangan penampilan gambar. Secara default, gambar akan ditampilkan secara berulang. Dengan properti ini, perulangan bisa diatur, apakah secara horizontal, vertikal, atau tidak berulang sama sekali. Berikut ini contoh penulisannya:

  body
  {
  background-image:url('gambar.png');}
  background-repeat:repeat-x;
  }

  Value dari background antara lain:

  • repeat-x, gambar akan berulang secara horizontal
  • repeat-y, gambar akan berulang secara vertikal
  • no-repeat, gambar hanya ditampilkan sekali ( tidak berulang )
  
  
• background-attachment
  
  Properti background-attachment berfungsi untuk mengatur agar gambar tidak mengikuti scroll. Penulisannya adalah sebagai berikut:

  body
  {
  background-image:url('gambar.png');
  background-repeat:no-repeat;
  background-attachment:fixed;
  }

  Selain fixed, properti background-attachment memiliki value lain, yaitu scroll. Dengan value scroll, gambar akan mengikuti scroll, dengan demikian hasilnya akan sama saja dengan tidak menggunakan properti background-attachment.
• Background-position
  Properti background-position berfungsi mengatur posisi penempatan gambar pada halaman web. Berikut contohnya:

  body
  {
  background-image:url('gambar.png');
  background-repeat:no-repeat;
  background-attachment:fixed;
  background-position:center center;
  }

  Pengisian value dari properti ini bisa dibagi dalam 2 kelompok:

  • Kombinasi antara top, bottom, dan center. Bila anda hanya menuliskan satu kata saja, secara default kata kedua akan di set ke center.
  • Dengan nilai satuan, misalnya 50% 30%, 30px 79px. Satuan-satuan dalam CSS yang lainnya antara lain in (inch), mm (milimeter), pt (point), dan lain-lain.

  Untuk diketahui bahwa properti background-position bisa berfungsi dengan baik pada browser Firefox dan Opera hanya jika background-attachment di set pada value fixed.

Ternyata pengaturan background memiliki banyak properti. Tapi kita bisa menuliskan kodenya secara ringkas seperti contoh:
body{background: #cd23fa url('gambar.png') no-repeat fixed center;}
Penulisan properti harus sesuai dengan urutan berikut:

1. background-color
2. background-image
3. background-repeat
4. background-attachment
5. background-position

Bila kita ingin menghilangkan salah satu properti di atas, maka hal tersebut tidak masalah, asalkan properti yang digunakan penulisannya sesuai dengan urutan.