Cara membuat Background di CSS

         Properti background CSS digunakan untuk menentukan efek latar belakang suatu elemen.

Properti CSS digunakan untuk  efek latar belakang :

• Warna latar belakang
• background-image
• background-repeat
• background-attachment
• background-posisi

Warna Latar Belakang

Properti background-color menentukan warna latar belakang dari elemen.

Warna latar belakang halaman diatur seperti ini:

Contoh

body {
    background-color: #b0c4de;
}

Dengan CSS, warna yang paling sering ditentukan oleh:

• nilai HEX - seperti "# ff0000"
• nilai RGB - seperti "rgb (255,0,0)"
• nama warna - seperti "merah"

    dengan contoh diatas anda bisa langsung untuk mencobanya menggunakan (NotePad/ Adobe Dreamweaver CS6).

      Pada contoh di bawah ini, elemen  <h1>, <p>, dan <div>  memiliki warna latar belakang yang berbeda:

Contoh

h1 {
    background-color: #6495ed;
}

p {
    background-color: #e0ffff;
}

div {
    background-color: #b0c4de;
}

Background Image atau menggunakan latarbelakang dengan Gambar

     Properti background-image menentukan gambar untuk digunakan sebagai latar belakang elemen.

       Secara default, gambar diulang sehingga mencakup seluruh elemen. Gambar latar belakang untuk halaman dapat diatur seperti ini:

Contoh

body {
    background-image: url("paper.gif");
}

Background Image - Mengatur posisi dan no-repeat

	Catatan: Bila menggunakan gambar latar belakang, menggunakan gambar yang tidak mengganggu teks.

Menampilkan gambar hanya sekali ditentukan oleh properti background-repeat:

Contoh

body {
    background-image: url("img_tree.png");
    background-repeat: no-repeat;
}

       Dalam contoh di atas, gambar latar belakang ditampilkan di tempat yang sama seperti teks. Kami ingin mengubah posisi gambar, sehingga tidak mengganggu teks terlalu banyak.

Posisi gambar ditentukan oleh properti background-position:

Contoh

body {
    background-image: url("img_tree.png");
    background-repeat: no-repeat;
    background-position: right top;
}

---

Latar Belakang - properti Singkatan

       Seperti yang dapat Anda lihat dari contoh di atas, ada banyak sifat yang harus dipertimbangkan ketika berhadapan dengan latar belakang.

      Untuk mempersingkat kode, juga mungkin untuk menentukan semua properti dalam satu properti tunggal. Ini disebut properti steno.

Properti singkat untuk background hanya "background":

Contoh

body {
    background: #ffffff url("img_tree.png") no-repeat right top;
}

Bila menggunakan properti singkatan urutan nilai properti adalah:

• warna latar belakang
• background-image
• background-repeat
• background-attachment
• background-position

     Tidak masalah jika salah satu dari nilai properti yang hilang, asalkan orang-orang yang hadir dalam urutan ini.

Cukup sekian................
Semoga Bermanfaat..............