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://lh5.googleusercontent.com/-r62EfAm5ZMA/T7b1MQTVzDI/AAAAAAAEJ3s/0yteIPctIpM/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://lh5.googleusercontent.com/-r62EfAm5ZMA/T7b1MQTVzDI/AAAAAAAEJ3s/0yteIPctIpM/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://lh5.googleusercontent.com/-r62EfAm5ZMA/T7b1MQTVzDI/AAAAAAAEJ3s/0yteIPctIpM/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