Property CSS untuk Mengatur Background Elemen HTML

Pada postingan kali ini saya akan berbagi informasi yang saya ketahui dari beberapa sumber bacaan saya mengenai beberapa atribut dan property CSS beserta value dan deskripsinya yang digunakan untuk mengatur atau memformat Elemen Background pada suatu Blog atau Website

Properti CSS untuk background digunakan untuk mengatur atau memformat Background  dari sebuah elemen HTML. Properti yang digunakan untuk mengatur background antara lain:

1. Background-Color
   Properti background-color digunakan untuk mendefinisikan warna background dari sebuah elemen HTML.
   Sebagai contoh misalnya kita hendak mengatur warna background dari sebuah halaman web maka properti ini kita gunakan pada selector body HTML.
   contoh: kita hendak menentukan warna Background halaman suatu blog dengan menggunakan warna hijau, maka kodenya sebagai berikut:
   

   body {background-color:green;}

   Adapun untuk menentukan Warna dari background ( nilai (value)dari atribut background) kita bisa melakukannya dengan beberapa cara antara lain dengan menggunakan:
   1. Nama warna dalam english seperti: "black" "white", "green" dan sebagainya
   2. Nilai dari komposisi warna RGB (Red, Green, Blue) seperti (0,0,0)
   3. Nilai Hex dari warna seferti "#000000", "#FFFFFF" dan sebagainya
2. Background-Image
   Property Background-Image dapat kita gunakan jika kita menghendaki pemakaiaan gambar untuk dijadikan sebagai background pada suatu elemen.
   Secara default, penggunaan Property Background-Image ini akan mengisi seluruh isi dari elemen dengan gambar yang ditentukan dan jika ukuran gambarnya kecil maka akan terus diulang baik secara horizontal maupun vertikal sehingga akan memenuhi seluruh elemen tersebut.
   Adapun contoh penggunaannya adalah sebagai berikut:
   

   body {background-image:url('alamat_url_gambar');}

3. Background-Repeat
   Property Background-repeat dapat kita gunakan jika kita hanya menghendaki pengulangan gambar yang hendak kita jadikan background sebuah elemen itu hanya berulang secara horizontal saja atau hanya secara vertikal saja
   Jika kita hanya menghendaki pengulangan secara horizontal saja, maka kode yang digunakan seperti berikut ini:
   

   body {background-image:url('alamat_url_gambar');
           background-repeat:repeat-x;}

   Jika kita hanya menghendaki pengulangan secara vertikal saja, maka kode yang digunakan seperti berikut ini:
   

   body {background-image:url('alamat_url_gambar');
           background-repeat:repeat-y;}

   Jika kita hanya menghendaki penggunaan gambar hanya terjadi sekali saja dan tidak ada pengulangan baik secara horizontal maupun secara vertikal, maka kode yang digunakan seperti berikut ini:
   

   body {background-image:url('alamat_url_gambar');
           background-repeat:no-repeat;}

4. Background-Attachment
   Background-Attachment dapat kita gunakan jika kita hendak mengatur posisi gambar dalam Background tetap berada di tempatnya (fixed) atau bisa di scroll
   Adapun cara penggunaanya adalah dengan memberi nilai scroll, fixed, atau inherit pada background-attachment
   contoh:
   

   body {background-image:url('alamat_url_gambar');
           background-attachment:fixed;}

5. Background-position
   Property Background-position digunakan untuk mengatur posisi gambar background apakah di atas sebelah kanan, di atas sebelah kiri, di bawah sebelah kanan, di bawah sebelah kiri dan lain sebagainya. Nilai untuk properti background-position adalah sebagai berikut : left top, left center, left bottom, right top, dan sebagainya
   contoh:
   

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

Demikian postingan kali ini mengenai Property CSS untuk Mengatur Background  Elemen HTML, semoga bermanfaat.

---

Tutorial CSS Dasar Yang Lain:

1. CSS Eksternal Mempercepat Loading Blog
2. Cara Memasang/Memasukkan kode CSS di Blog
3. Cara Membuat Blockquote pada Posting Blog dengan CSS
4. Cara Membuat Efek Shadow pada Gambar Posting Blog
5. Cara Membuat Gambar Animasi dengan Efek Hover CSS
6. Cara Menuliskan Kode CSS (CSS Syntax)
7. Definisi/Pengertian CSS (Cascading Style Sheet)
8. Membuat Efek Shadow Gambar Widget Blog
9. Penggunaan Selector CSS Class, ID dan div