Belajar Kode CSS & Desain Blog: 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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiXCJjLlKVn6rQEdQCDOdO__iEw6AySQm7IgVANEm-KlpE7aXyCWi8w8eaqN8Yl5FBDQ7UxOPRCaALZwLsFNUdPCMdpTIJfBhQ9-f8gyB_-iNtX3dPr42sX3NGII66ogdP_EhQrF-mF7n4/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!

<!DOCTYPE html>
<html>
<title>Menggabungkan kode beberapa background-property</title>
<head>  
<style type="text/css">
body{ 
      background:#888 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj_cFX_-l9e-ksZHJFLqFMkfNhbbGr26qQ4ZIY00ctk3K57eMcUtHICeDJAPFylfgCIJZ__6HTF8dfsJXj9gDudgR0eA3cnwQuj176X3n6cq-3QscNNPDsu7geDeEMJA7XEbznTztJWsbU/) top center no-repeat fixed;
      background-size:100% auto;
      margin:0 auto;
      padding:0;
      font-size:14px;
      font-family:Arial;
      color:#fff;
}
h3,h4{text-align:center;text-shadow:1px 1px 1px #000;color:orange;}
h4{color:lightyellow;}
.my-wrapper1{
      width:400px;
      background-color:red;
      background:red url(https://lh3.googleusercontent.com/-WaYtzbSCS7o/UCKgogvy7eI/AAAAAAAAN6k/DcuW4tULwM8/IMG_2809.JPG);
      background-repeat:no-repeat;
      background-poition:left top;
      margin:20px auto;
      border:20px solid rgba(255,255,255,0.4);
      border-radius:8px;
      padding:40px;
      overflow:auto;
      background-size:100% 100%;
      line-height:24px;
}
.my-wrapper2{
      width:400px;
      background:red url(https://lh3.googleusercontent.com/-WaYtzbSCS7o/UCKgogvy7eI/AAAAAAAAN6k/DcuW4tULwM8/IMG_2809.JPG) no-repeat 0px 0px;
      margin:20px auto;
      border:20px solid rgba(255,255,255,0.4);
      border-radius:8px;
      padding:40px;
      overflow:auto;
      background-size:100% 100%;
      line-height:24px;
}
</style>
</head>
<body>

<h3>Menggunakan beberapa background-property</h3>

<div class="my-wrapper1">
Dengan background clip property maka background hanya akan ditampilkan pada box dalam dan tidak termasuk pada bagian padding. Anda akan melihat secara jelas perbedaan yang terjadi diantara kedua box dan kode yang digunakan. Dengan background clip property maka background hanya akan ditampilkan pada box dalam dan tidak termasuk pada bagian padding. Anda akan melihat secara jelas perbedaan yang terjadi diantara kedua box dan kode yang digunakan.
</div>

<h3>Kode gabungan beberapa background-property</h3>
<div class="my-wrapper2">
Dengan background clip property maka background hanya akan ditampilkan pada box dalam dan tidak termasuk pada bagian padding. Anda akan melihat secara jelas perbedaan yang terjadi diantara kedua box dan kode yang digunakan. Dengan background clip property maka background hanya akan ditampilkan pada box dalam dan tidak termasuk pada bagian padding. Anda akan melihat secara jelas perbedaan yang terjadi diantara kedua box dan kode yang digunakan.
</div>

</body> 
</html>

4 komentar:

Unknown1 Juni 2013 pukul 20.45
ribet mas blog nya, kurang nyaman templatenya
BalasHapus
Balasan
Unknown1 Juni 2013 pukul 20.48
Komentar ini telah dihapus oleh pengarang.
BalasHapus
Balasan
Unknown1 Juni 2013 pukul 20.49
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
Balasan
Didit Riadi26 Februari 2014 pukul 02.34
gak fokus baca nya sob,template nya aga ribet
http://www.duniagame.info/
BalasHapus
Balasan

Tambahkan komentar

Belajar Kode CSS & Desain Blog

Halaman

Menggabungkan beberapa Background Property

Contoh beberapa kode background-property

Hasil penggabungan kode background-property

Contoh penulisan background dalam sebuah fungsi/syntax

Dalam bentuk lebih sederhana

4 komentar:

Archive Blog C l o s e

Arsip Blog

My Profile C l o s e

Mengenai Saya

Follower C l o s e

Follower

RSS C l o s e

Label C l o s e

Label

Halaman

date_replace('8.14.2012');

Menggabungkan beberapa Background Property

Contoh beberapa kode background-property

Hasil penggabungan kode background-property

Contoh penulisan background dalam sebuah fungsi/syntax

Dalam bentuk lebih sederhana

4 komentar:

Archive BlogC l o s e

Arsip Blog

My ProfileC l o s e

Mengenai Saya

FollowerC l o s e

Follower

RSSC l o s e

LabelC l o s e

Label

Archive Blog C l o s e

My Profile C l o s e

Follower C l o s e

RSS C l o s e

Label C l o s e