Background Origin Property

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

My ProfileC l o s e

FollowerC l o s e