Halo teman-teman, pada kesempatan kali ini saya akan menjelaskan cara mengatur posisi pada gambar di css. Mungkin sebagian dari teman-teman sudah tahu cara untuk memasang gambar dengan CSS, baik itu di element body html maupun element lainnya. Untuk memasang gambar disuatu element melalui CSS, biasanya teman-teman menggunakan property background-image yang dimana sproperty tersebut ditujukan untuk membuat background dengan file gambar yang dihubungkan dengan url lokasi gambar. Namun tidak hanya sabatas itu saja, di CSS teman-teman bisa juga memasang gambar beserta dengan penentuannya posisi gambar yang tampilkannya pada properti Background CSS. Mungkin sebagian dari teman-teman sudah tahu akan tetapi masih bingung untuk mengaplikasikannya di CSS, sehingga ketika ingin membuat background dengan tampilan yang menarik tidak bisa diwujudkan, karena hal tersebut sangat penting jika menurut saya. Karena dengan posisi tersebut akan berpengaruh dengan pengulangan gambar jika resolusi dari gambar tersebut dengan ukuran kecil, sedangkan resolusi yang dibutuhkan di berbagai perangkat berbeda-beda.

background-position adalah salah satu property CSS yang berhubungan langsung dengan gambar dan berfungsi untuk mengatur posisi dari gambar background tersebut . Adapun value (nilai) dari property tersebut ada beberapa yang bisa teman-teman gunakan sesuai dengan kebutuhan yang ingin teman-teman gunakan. Berikut dibawah ini daftar value (nilai) yang bisa teman-teman gunakan :

cara mengatur posisi pada gambar di css

background-position

  1. left top (pada value (nilai) dari background-position tersebut adalah berfungsi untuk menempati posisi gambar ke bagian kiri atas suatu element html).
  2. left center (pada value (nilai) dari background-position tersebut adalah berfungsi untuk menempati posisi gambar pada bagian kiri tengah suatu element html).
  3. left bottom (pada value (nilai) dari background-position tersebut adalah berfungsi untuk menempati gambar pada posisi bagian kiri bawah suatu element html).
  4. center center (pada value (nilai) dari background-position tersebut adalah berfungsi untuk menempati posisi gambar pada bagian tepat di tengah – tengah suatu element).
  5. top center (pada value (nilai) dari background-position tersebut adalah berfungsi untuk menempati posisi gambar pada bagian atas tengah suatu element html.)
  6. bottom center (pada value (nilai) dari background-position tersebut adalah berfungsi untuk menempati posisi gambar pada bagian bawah tengah suatu element).
  7. right top (pada value (nilai) dari background-position tersebut adalah berfungsi untuk menempati posisi gambar pada bagian kanan atas suatu element html).
  8. right center (pada value (nilai) dari background-position tersebut adalah berfungsi untuk menempati gambar pada posisi bagian kanan tengah suatu element).
  9. right bottom (pada value (nilai) dari background-position tersebut adalah berfungsi untuk menempati gambar pada posisi bagian kanan bawah pada suatu element).

Sebagai contoh, saya akan memasang gambar pada element body html melalui css dengan posisi gambar tersebut ada di posisi kiri dari tengah element body, maka kodenya seperti berikut :

Dari kode di atas maka akan menampilkan hasil outputnya seperti gambar di bawah ini :

cara mengatur posisi gambar di css

Sampai disini saya berharap teman-teman sudah memahaminya, dan dari property background-position tersebut masih bisa di kombinasikan lagi dengan beberapa property css yang dapat diaplikasikan untuk penggunaan gambar, sehingga tampilan gambar tersebut bisa dimanipulasi dengan tujuan yang berbeda-beda.

Sekian penjelasan dari saya mengenai cara mengatur posisi pada gambar di css, semoga bermanfaat.

~ Happy Coding ~