Menggabungkan beberapa Background Property

Background Property menjadi sangat penting untuk dibahas secara khusus karena melalui background property ini beberapa properti background dapat dituliskan menjadi sebuah kode terpadu yang membuat penulisan kode css menjadi lebih efisien, praktis dan efektif. Anda dapat menggabungkan penulisan background-color property, background-image property, background-position property dan background-repeat property hanya dalam sebuah kode sehingga bentuknya menjadi lebih pendek.

Contoh beberapa kode background-property

background-color:red;
background-image:url(image.jpg);
background-repeat:no-repeat;
background-position:top center;
background-attachment:fixed;

Hasil penggabungan kode background-property

background:red url(image.jpg) no-repeat top center;

Contoh penulisan background dalam sebuah fungsi/syntax

body{ 
      background:#eee url(https://lh5.googleusercontent.com/-r62EfAm5ZMA/T7b1MQTVzDI/AAAAAAAEJ3s/0yteIPctIpM/s640/DSC_3801.JPG) top center no-repeat fixed;
      background-size:100% 650px;
}
.my-wrapper{
      width:400px;
      height:300px;
      background-color:red;
      background-image:url(image.jpg);
      background-repeat:no-repeat;
      background-position:top center;
      margin:20px auto;
      border:2px solid green;
      border-radius:8px;
      padding:20px 12px;
}

Dalam bentuk lebih sederhana

.my-wrapper{
      width:400px;
      height:300px;
      background:red url(image.jpg) no-repeat top center;
      margin:20px auto;
      border:20px solid rgba(255,255,255,0.3);
      border-radius:8px;
      padding:20px 12px;
}
Pada demo di bawah, box pertama dibuat dengan menggunakan beberapa background-property dalam kode terpisah, sedangkan box kedua menggabungkan beberapa background-property menjadi satu kode terpadu. Hasil keduanya sama persis tak ada bedanya. Kode kedua lebih menguntungkan karena lebih pendek dan lebih simpel serta lebih baik bagi blog jika digunakan dalam jumlah yang banyak.
Please click the button to display. Continue with editing code and click to see the results!

4 komentar:

  1. ribet mas blog nya, kurang nyaman templatenya

    BalasHapus
  2. Komentar ini telah dihapus oleh pengarang.

    BalasHapus
  3. mau tau cara menghasilkan uang dari blog beserta cara mendapatkan iklannya semua blog pemula boleh ikut yang masih memiliki pengunjung blog masih sedikit, Silahkan kunjungi halaman ini http://inginmengabdi.blogspot.com/2013/05/cara-menghasilkan-uang-dari-blog-dengan.html

    BalasHapus
  4. gak fokus baca nya sob,template nya aga ribet
    http://www.duniagame.info/

    BalasHapus

My ProfileC l o s e

FollowerC l o s e