Background position property merupakan salah satu dari css background yang sangat penting saat background image property digunakan. Berfungsi untuk mengatur posisi background dalam arah vertical dan horizontal. Background position property biasa dipekerjakan bersama dengan background image property, background repeat property dan background size property, sekalipun yang paling sering adalah bersama background image property.
Value/nilai background position property
Ada 3 value yang sering digunakan untuk pengaturan posisi background.
- left dan right (horizontal positioning) serta top dan bottom (vertical positioning).
- left » diujung sebelah kiri.
- right » diujung sebelah kanan.
- top » diujung paling atas.
- bottom » diujung paling bawah.
- center » ditengah.
Penulisan kode :
- background-position:left top; (kiri - atas), atau
- background-position:top left; (atas - kiri)
- background-position:center center; (tengah - tengah), atau
- background-position:center; (tengah)
- background-position:right center; (kanan - tengah)
- background-position:right bottom; (kanan - bawah)
- pixel (px)
Penulisan kode :
- background-position:0 0; (sama artinya dengan left - top)
- background-position:0 100px; (sama artinya dengan left - 100px from top)
- background-position:50px 10px; (sama artinya dengan 50px from left - 10px from top)
- % (persen).
Penulisan kode :
- background-position:0 40%; (left - 40% from top)
- background-position:10% 70%; (10% from left - 70% from top)
- background-position:100% 0; (100% from left - 0% from top) atau (right - top)
- background-position:100% 100%; (right - bottom)
Penerapan dalam elemen html
div{
width:400px;
height:165px;
background-image: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgNsdBZyV60UwdqqBdA9FTjjTXOe_FN-65jUekC2G1GjJrIU2YKPdZp-iyfvaNkAkJa3caycOETdjnYsk26Ziko6-dz7Hv05gseNntlcAsLdz0dNAGRfXH7pnof8SzVtLUXSxuyOlADACM/h120/sky-01-400x165.jpg");
background-position:left center;
}
div{
width:400px;
height:165px;
background-image: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgNsdBZyV60UwdqqBdA9FTjjTXOe_FN-65jUekC2G1GjJrIU2YKPdZp-iyfvaNkAkJa3caycOETdjnYsk26Ziko6-dz7Hv05gseNntlcAsLdz0dNAGRfXH7pnof8SzVtLUXSxuyOlADACM/h120/sky-01-400x165.jpg");
background-position:10px 30px;
}
div{
width:400px;
height:165px;
background-image: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgNsdBZyV60UwdqqBdA9FTjjTXOe_FN-65jUekC2G1GjJrIU2YKPdZp-iyfvaNkAkJa3caycOETdjnYsk26Ziko6-dz7Hv05gseNntlcAsLdz0dNAGRfXH7pnof8SzVtLUXSxuyOlADACM/h120/sky-01-400x165.jpg");
background-position:5% 50%;
}
div{
width:400px;
height:165px;
background-image: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgNsdBZyV60UwdqqBdA9FTjjTXOe_FN-65jUekC2G1GjJrIU2YKPdZp-iyfvaNkAkJa3caycOETdjnYsk26Ziko6-dz7Hv05gseNntlcAsLdz0dNAGRfXH7pnof8SzVtLUXSxuyOlADACM/h120/sky-01-400x165.jpg");
background-position:10px 50%;
}
div{
width:400px;
height:165px;
background-image: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgNsdBZyV60UwdqqBdA9FTjjTXOe_FN-65jUekC2G1GjJrIU2YKPdZp-iyfvaNkAkJa3caycOETdjnYsk26Ziko6-dz7Hv05gseNntlcAsLdz0dNAGRfXH7pnof8SzVtLUXSxuyOlADACM/h120/sky-01-400x165.jpg");
background-position:left 50%;
}Di bawah ini ada beberapa contoh kode html yang menggunakan background position. Edit kode untuk mendapatkan hasil berbeda!
Please click the button to display. Continue with editing code and click to see the results!
Tidak ada komentar:
Posting Komentar