Cara Mengatur Posisi Background Dengan CSS
Untuk mengambil bebarapa bagian gambar untuk dijadikan background kita bisa mengaturnya dengan property "background-position" untuk mengatur posisi backgroundnya. perlu kita ketahui sebelumnya dalam mengatur posisi background di perlukan dua value untuk menempatkan posisi yang tepat. pada value pertama biasanya mengatur posisi horizontalnya (x) dan value yang kedua mengatur posisi vertikalnya (y).
Baiklah akan saya jelaskan bagaimana caranya mengatur posisi background dengan css. Pada background-position ada 5 jenis value yang perlu diperhatikan yaitu :
- Background-Position dengan intial (posisi default)
- Background-Position dengan Value Fixed (posisi tetap)
- Background-Position dengan Value (atas, bawah, kanan, kiri dan tengah)
- Background-Position dengan Value (%)
- Backgroun-Position dengan Value (px)
Pada Value ini penulisannya cukup dengan intial pada valuenya atau mungkin gak perlu dituliskan karena value ini mengatur posisi defaultnya.
Contoh :
<style type="text/css">
#contoh
{background-image:url (image.jpg);
background-position:intial;
}
</style>
#contoh
{background-image:url (image.jpg);
background-position:intial;
}
</style>
Pada Value ini posisi background akan tetap pada posisinya walaupun kita menggerakan scroll ke bawah.
Contoh :
<style type="text/css">
#contoh
{background-image:url (image.jpg);
background-position:fixed;
}
</style>
#contoh
{background-image:url (image.jpg);
background-position:fixed;
}
</style>
Pada Value ini tak boleh sembarangan menulis valuenya. pada pengaturan posisi horizontal hanya dapat berfungsi pada value (left, right, dan center). Sedangkan pada posisi vertikalnya value yang bisa digunakan adalah (top, bottom, dan center).
Contoh :
<style type="text/css">
#contoh
{background-image:url (image.jpg);
background-position:center top;
}
</style>
#contoh
{background-image:url (image.jpg);
background-position:center top;
}
</style>
Pada Value ini kita bisa mengaturnya sesuai keinginan kita, dengan value pertama adalah jarak dari kiri berapa persen dari lebar dari kontennya, dan value kedua adalah berapa persen dari tinggi konten.
Contoh :
<style type="text/css">
#contoh
{background-image:url (image.jpg);
background-position:50% 50%;
}
</style>
#contoh
{background-image:url (image.jpg);
background-position:50% 50%;
}
</style>
Pada Value ini kita juga dapat mengaturnya sesuai dengan keinginan kita, dengan value pertamanya adalah berapa pixel (px) dari kirinya konten, dan value keduanya adalah jarak berapa pixel (px) dari jarak atasnya konten.
Contoh :
<style type="text/css">
#contoh
{background-image:url (image.jpg);
background-position:100px 200px;
}
</style>
#contoh
{background-image:url (image.jpg);
background-position:100px 200px;
}
</style>