Background origin property memungkinkan pengaturan background sebuah elemen/box agar bisa dimulai pada tiga ujung bagian berbeda. Border, padding dan content box. Agar background dapat berfungsi secara optimal, background size property harus dilibatkan di dalamnya. Penggunaan nilai/value % (persen) jadi pilihan paling tepat untuk memudahkan pengaturan. Jika ingin menambahkan property background lainnya, maka background position dapat digunakan selain tentu saja background-repeat property dan background-image property.
Kode Background origin property
- background-origin:border-box
- background-origin:padding-box
- background-origin:content-box
Contoh penggunaan Background origin property
.bg-origin-border{
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiXCJjLlKVn6rQEdQCDOdO__iEw6AySQm7IgVANEm-KlpE7aXyCWi8w8eaqN8Yl5FBDQ7UxOPRCaALZwLsFNUdPCMdpTIJfBhQ9-f8gyB_-iNtX3dPr42sX3NGII66ogdP_EhQrF-mF7n4/s350-c/DSC_3801.JPG);
background-repeat:no-repeat;
background-position:top-left;
border:20px solid rgba(0,0,0,0.2);
padding:20px;
margin:20px auto;
width:270px;
background-size:100% 100%;
background-origin:border-box;
}
.bg-origin-border{
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiXCJjLlKVn6rQEdQCDOdO__iEw6AySQm7IgVANEm-KlpE7aXyCWi8w8eaqN8Yl5FBDQ7UxOPRCaALZwLsFNUdPCMdpTIJfBhQ9-f8gyB_-iNtX3dPr42sX3NGII66ogdP_EhQrF-mF7n4/s350-c/DSC_3801.JPG);
background-repeat:no-repeat;
background-position:top-left;
border:20px solid rgba(0,0,0,0.2);
padding:20px;
margin:20px auto;
width:270px;
background-size:100% 100%;
background-origin:padding-box;
}
.bg-origin-border{
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiXCJjLlKVn6rQEdQCDOdO__iEw6AySQm7IgVANEm-KlpE7aXyCWi8w8eaqN8Yl5FBDQ7UxOPRCaALZwLsFNUdPCMdpTIJfBhQ9-f8gyB_-iNtX3dPr42sX3NGII66ogdP_EhQrF-mF7n4/s350-c/DSC_3801.JPG);
background-repeat:no-repeat;
background-position:top-left;
border:20px solid rgba(0,0,0,0.2);
padding:20px;
margin:20px auto;
width:270px;
background-size:100% 100%;
background-origin:content-box;
}Di bawah akan disertakan demo beberapa box dengan dan tanpa background-origin property. 2 buah box paling atas tanpa background-origin property, sedang box lain menggunakan background-origin property dengan background berukuran besar dan kecil. Bandingkan masing-masing box berikut fungsi masing-masing nilai/value background-origin property.
Please click the button to display. Continue with editing code and click to see the results!
Tidak ada komentar:
Posting Komentar