Properti Style backgroundPosition DOM pada HTML digunakan untuk mengatur atau mengembalikan posisi dari background-image pada suatu elemen.

Sebelum memahami lebih dalam materi tentang Mengatur Latar Belakang HTML backgroundPosition Style DOM, terlebih dahulu pelajari materi tentang: Mengatur Gambar Latar Belakang HTML backgroundImage Style DOM, Mengatur Warna Latar Belakang HTML backgroundColor Style DOM, dan Mengatur Gambar Latar Belakang HTML backgroundAttachment DOM.

Sintak:

Digunakan untk mendapatkan properti backgroundPosition: object.style.backgroundPosition
Digunakan untuk mengatur properti backgroundPosition: object.style.backgroundPosition = value

Return Values: Berfungsi untuk mengembalikan sebuah nilai string yang merepresentasikan posisi dari background-image.

Property Values:

keyword values: digunakan untuk menentukan posisi menggunakan keyword. Jika hanya terdapat satu nilai saja yang ditentukan, maka nilai lainnya akan menjadi 'center' secara default.

Beberapa kemungkinan dari kombinasi keyword adalah: top left | top center | top right | center left | center center | center right | bottom left | bottom center | bottom right.

x% y%: Digunakan untuk menentukan posisi menggunakan nilai persen. Nilai x% berfungsi untuk menentukan posisi horizontal, dan nilai y% berfungsi untuk menentukan posisi vertikal terhadap posisi initial top-left.
xpos ypos: Digunakan untuk menentukan posisi menggunakan satuan pixel atau nilai pengukuran CSS lainnya. Nilai xpos berfungsi untuk menentukan posisi horizontal, dan ypos berfungsi untuk menentukan posisi vertikal terhadap posisi initial top-left.
initial: Digunakan untuk mengatur nilai properti backgroundPosition ke nilai default-nya.
inherit: Digunakan untuk menerima nilai properti dari properti parent.

Nilai atau value dari properti backgroundPosition dapat dijelaskan menggunakan bebera contoh sebagai berikut.

Contoh: Penggunaan value keyword, dengan menggunakan nilai 'bottom right' sebagai ilustrasi.

<!DOCTYPE html>

<html

lang="en">

<head>

<title>

Properti Style

backgroundPosition DOM

</title>

<style>

.bg-img1

{

height: 300px;

width: 300px;

border-style: solid;

background:

url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg0fWTvYnJ4J4D_mj8vUbGpufPYHsq8Xsw2swXjSTyWIpM8K3UbEtnLBTytORLimGCcVDoHRuUrCyINBQFaCu30OBjFQwdo84zrF3aNZtbZSBa9JZk9ah7OTYVsDPard9U6oxAi6-y05Mg/s35/t%25252Bkotak%25252Bwhite.png')

no-repeat center;}

</style>

</head>

<body>

<h1

style="color: green">

Blog Elfan

</h1>

<b>

DOM Style backgroundPosition

Property

</b>

<p>

Klik tombol untuk mengubah

posisi image background.

</p>

<div

class="bg-img1">

</div>

<button

onclick="changePos1()">

Change position of background

image

</button>

function

changePos1()

{

elem = document.querySelector('.bg-img1');

// Pengaturan posisi ke bawah

// vertikal dan kanan

// horizontal.

elem.style.backgroundPosition = 'bottom right';

}

</script>

</body>

</html>

Output:

Blog Elfan

DOM Style backgroundPosition Property

Klik tombol untuk mengubah posisi image background.

Contoh: Penggunaan nilai persentasi untuk menentukan posisi, dengan menggunakan posisi '25% 75%' terhadap gambar.

<!DOCTYPE html>

<html

lang="en">

<head>

<meta

charset="UTF-8">

<title>

Properti Style

backgroundPosition DOM

</title>

<style>

.bg-img2

{

height: 300px;

width: 300px;

border-style: solid;

background:

no-repeat center;}

</style>

</head>

<body>

<h1

style="color: green">

Blog Elfan

</h1>

<b>

Properti Style

backgroundPosition DOM

</b>

<p>

Klik tombol untuk mengubah

posisi dari image background.

</p>

<div

class="bg-img2">

</div>

<button

onclick="changePos2()">

Change position of background

image

</button>

function changePos2()

{

elem = document.querySelector('.bg-img2');

// Pengaturan posisi ke nilai

// horizontal 25% dan nilai

// vertikal 75%.

elem.style.backgroundPosition = '25% 75%';

}

</script>

</body>

</html>

Output:

Blog Elfan

Properti Style backgroundPosition DOM

Klik tombol untuk mengubah posisi dari image background.

Contoh: Penggunaan unit fixed untuk menentukan nilai posisi, dengan menggunakan nilai posisi '50px 25px' terhadap image.

<!DOCTYPE html>

<html

lang="en">

<head>

<title>

Properti Style

backgroundPosition DOM

</title>

<style>

.bg-img3

{

height: 300px;

width: 300px;

border-style: solid;

background:

no-repeat center;}

</style>

</head>

<body>

<h1

style="color: green">

Blog Elfan

</h1>

<b>

Properti DOM Style

backgroundPosition

</b>

<p>

Klik tombol untuk mengubah

posisi dari image background.

</p>

<div

class="bg-img3">

</div>

<button

onclick="changePos3()">

Change position of background

image

</button>

function changePos3()

{

elem = document.querySelector('.bg-img3');

// Pengaturan posisi

// horizontal ke nilai 50px

// dan vertikal 25px.

elem.style.backgroundPosition = '50px 25px';

}

</script>

</body>

</html>

Output:

Blog Elfan

Properti DOM Style backgroundPosition

Klik tombol untuk mengubah posisi dari image background.

Contoh: Penggunaan nilai initial, dengan pengaturan posisi ke nilai default.

<!DOCTYPE html>

<html

lang="en">

<head>

<title>

Properti Style

backgroundPosition DOM

</title>

<style>

.bg-img4

{

height: 300px;

width: 300px;

border-style: solid;

background:

no-repeat center;}

</style>

</head>

<body>

<h1

style="color: green">

Blog Elfan

</h1>

<b>

Properti Style

backgroundPosition DOM

</b>

<p>

Klik tombol untuk mengubah

posisi dari image background.

</p>

<div

class="bg-img4">

</div>

<button

onclick="changePos4()">

Change position of background

image

</button>

function changePos4()

{

elem = document.querySelector('.bg-img4');

// Pengaturan posisi ke nilai

// default dengan menggunakan

// initial.

elem.style.backgroundPosition = 'initial';

}

</script>

</body>

</html>

Output:

Blog Elfan

Properti Style backgroundPosition DOM

Klik tombol untuk mengubah posisi dari image background.

Contoh: Penggunaan nilai inherit, yang menerima nilai turunan dari elemen parent.

<!DOCTYPE html>

<html

lang="en">

<head>

<title>

Property Style

backgroundPosition DOM

</title>

<style>

/* Parent element */

#parent

{

height: 300px;

width: 300px;

border-style: solid;

/* Pengaturan parent dari

background-position ke center

left. */

background-position: center left;}

.bg-img5 {

height: 300px;

width: 300px;

background:

no-repeat center;}

</style>

</head>

<body>

<h1

style="color: green">

Blog Elfan

</h1>

<b>

Properti Style

backgroundPosition DOM

</b>

<p>

Klik tombol untuk mengubah

posisi image background.

</p>

<div

id="parent">

</div>

Change position of background

image

</button>

function changePos5()

{

elem = document.querySelector('.bg-img5');

// Pengaturan posisi ke

// inherit dari nilai parent.

elem.style.backgroundPosition = 'inherit';

}

</script>

</body>

</html>

Output:

Blog Elfan

Properti Style backgroundPosition DOM

Klik tombol untuk mengubah posisi image background.

Baca Juga:

Pengaturan latar belakang pada elemen HTML menjadi salah satu aspek penting dalam desain halaman web. Salah satu properti yang sering digunakan untuk keperluan ini adalah backgroundPosition. Properti ini memungkinkan pengelolaan posisi latar belakang dengan fleksibilitas tinggi, sehingga elemen dapat diatur tampilannya sesuai kebutuhan.

Properti backgroundPosition digunakan untuk menentukan posisi gambar latar belakang pada elemen. Dengan pengaturan ini, gambar dapat ditempatkan pada lokasi tertentu, baik berdasarkan titik-titik tetap maupun dengan pendekatan relatif terhadap ukuran elemen. Hasil akhirnya adalah elemen yang lebih menarik secara visual dengan latar belakang yang tertata rapi.

Secara umum, properti ini mendukung berbagai nilai yang menggambarkan posisi gambar latar belakang. Nilai-nilai tersebut dapat berupa ukuran absolut atau persentase yang menunjukkan lokasi tertentu. Penggunaan nilai ini memudahkan proses penyesuaian desain, terutama ketika elemen memiliki dimensi berbeda. Dengan demikian, fleksibilitas ini menjadikan pengaturan latar belakang lebih serbaguna dan adaptif terhadap berbagai kebutuhan desain.

Ketika menggunakan backgroundPosition, ada dua arah utama yang diatur, yaitu horizontal dan vertikal. Arah horizontal mengacu pada pengaturan posisi gambar ke kiri atau kanan, sedangkan arah vertikal berkaitan dengan penempatan ke atas atau bawah. Kombinasi keduanya memungkinkan gambar latar untuk diletakkan pada titik spesifik dalam elemen. Hal ini sangat berguna untuk menciptakan tata letak yang estetis dan terorganisir.

Sebagai contoh, gambar latar dapat diletakkan di tengah, atas, bawah, atau sudut tertentu dari elemen. Untuk menempatkan gambar di tengah elemen, pengaturan horizontal dan vertikal dapat disesuaikan agar gambar berada tepat di tengah-tengah elemen tersebut. Sebaliknya, jika gambar ingin ditempatkan di sudut tertentu, nilai posisi yang sesuai dapat ditentukan untuk mencapainya.

Salah satu keunggulan utama dari pengaturan backgroundPosition adalah kemampuan untuk menggunakan nilai relatif. Nilai relatif memungkinkan gambar menyesuaikan diri dengan perubahan ukuran elemen. Dengan kata lain, gambar latar akan tetap tampil proporsional meskipun dimensi elemen berubah. Hal ini memberikan manfaat besar dalam desain yang responsif, terutama ketika halaman dilihat pada perangkat dengan ukuran layar berbeda.

Selain itu, properti ini juga memungkinkan penggunaan berbagai metode pengaturan posisi, seperti kombinasi nilai piksel dengan persentase. Kombinasi ini memberikan kebebasan lebih dalam mengatur posisi gambar latar, sehingga dapat menciptakan efek visual yang menarik dan harmonis dengan elemen lain dalam halaman. Misalnya, gambar latar dapat ditempatkan sedemikian rupa sehingga menciptakan ilusi perspektif atau kedalaman.

Pengaturan posisi latar belakang juga dapat disesuaikan dengan konteks desain. Misalnya, dalam kasus tertentu, gambar latar hanya perlu menonjolkan bagian tertentu dari desain. Dengan backgroundPosition, bagian gambar yang relevan dapat ditempatkan pada posisi strategis tanpa harus mengubah dimensi atau skala gambar. Hal ini membantu menjaga konsistensi visual dan efisiensi dalam proses desain.

Namun, untuk mendapatkan hasil optimal, penting untuk memperhatikan kompatibilitas properti ini dengan berbagai jenis perangkat dan peramban. Sebagian besar peramban modern mendukung properti ini dengan baik, sehingga penggunaannya dapat diandalkan dalam proyek desain web. Meskipun demikian, pengujian pada berbagai perangkat tetap dianjurkan untuk memastikan hasil yang konsisten.

Pengaturan latar belakang menggunakan backgroundPosition juga sering dikombinasikan dengan properti lain, seperti ukuran dan pengulangan latar belakang. Kombinasi ini memungkinkan kontrol penuh terhadap cara latar belakang ditampilkan, termasuk skalanya dan bagaimana pola gambar diulang pada elemen. Dengan pendekatan ini, desainer dapat menciptakan elemen yang harmonis secara visual tanpa mengorbankan fleksibilitas.

Sebagai kesimpulan, backgroundPosition adalah salah satu alat yang sangat berguna dalam desain elemen HTML. Properti ini memberikan kemampuan untuk mengatur posisi gambar latar belakang dengan tingkat presisi yang tinggi, baik secara absolut maupun relatif. Fleksibilitasnya menjadikan properti ini cocok untuk berbagai jenis desain, termasuk yang membutuhkan penyesuaian pada perangkat dengan ukuran layar berbeda. Dengan pemahaman yang baik tentang cara kerja properti ini, desain halaman web dapat mencapai tingkat estetika dan fungsi yang lebih optimal.

Pemanfaatan backgroundPosition juga dapat memberikan kesan visual yang lebih menarik jika dipadukan dengan konsep-konsep desain kreatif. Contohnya adalah dengan memanfaatkan properti ini untuk menciptakan efek paralaks, yang memberikan ilusi kedalaman pada halaman web. Dalam desain paralaks, gambar latar belakang dapat diatur posisinya secara dinamis sehingga bergerak lebih lambat dibandingkan elemen lain saat pengguna menggulir halaman. Teknik ini memberikan pengalaman interaktif yang lebih mendalam dan meningkatkan daya tarik visual.

Selain itu, properti backgroundPosition juga sangat berguna dalam penyesuaian gambar latar untuk elemen-elemen kecil, seperti tombol atau ikon. Dalam kasus ini, gambar latar dapat berfungsi sebagai ornamen tambahan yang memberikan kesan lebih estetis tanpa mengganggu fungsi utama elemen tersebut. Dengan mengatur posisi gambar latar secara tepat, desain elemen kecil dapat tetap terjaga kerapihannya.

Pada desain berbasis tata letak grid, pengaturan backgroundPosition juga memainkan peranan penting. Dalam tata letak ini, gambar latar sering kali digunakan untuk menonjolkan area tertentu dari elemen atau sebagai panduan visual. Misalnya, gambar latar dapat diatur agar berada pada titik-titik persimpangan grid untuk menciptakan keseimbangan visual yang menarik. Pendekatan ini membantu dalam menghasilkan desain yang terstruktur dan mudah dipahami.

Dalam konteks desain halaman web yang berorientasi pada pengalaman pengguna, backgroundPosition dapat digunakan untuk menarik perhatian pada elemen tertentu. Dengan menempatkan gambar latar di posisi strategis, desainer dapat mengarahkan fokus pengguna ke bagian penting dari halaman, seperti judul, tombol, atau area informasi utama. Strategi ini membantu meningkatkan keterlibatan pengguna dan memastikan informasi penting tersampaikan dengan efektif.

Tidak hanya dalam elemen individu, properti backgroundPosition juga dapat diterapkan pada bagian-bagian besar halaman, seperti tajuk atau latar belakang seluruh halaman. Dalam hal ini, pengaturan posisi gambar latar dapat menciptakan suasana tertentu sesuai dengan tema atau tujuan halaman. Sebagai contoh, gambar latar yang ditempatkan di bagian atas halaman dapat memberikan kesan dominan, sementara gambar yang diatur pada bagian bawah dapat memberikan kesan ringan atau mendukung.

Pemilihan nilai yang digunakan dalam backgroundPosition juga dapat dipadukan dengan pendekatan artistik untuk menciptakan komposisi visual yang unik. Misalnya, gambar latar dapat diatur pada posisi tidak simetris untuk menciptakan kesan dinamis dan modern. Pendekatan ini sering digunakan dalam desain yang berfokus pada estetika kreatif dan inovatif.

Namun, perlu diingat bahwa pengaturan backgroundPosition yang berlebihan juga dapat berdampak negatif pada pengalaman pengguna. Jika posisi gambar latar tidak selaras dengan elemen lainnya atau terlalu mencolok, hal ini dapat mengganggu fokus pengguna dan merusak keseluruhan desain. Oleh karena itu, penting untuk memastikan bahwa pengaturan posisi gambar latar tetap mendukung fungsi dan tujuan elemen yang bersangkutan.

Sebagai bagian dari pengembangan desain responsif, properti backgroundPosition sering kali digunakan bersama media query. Dengan cara ini, posisi gambar latar dapat diatur ulang sesuai dengan ukuran layar perangkat yang digunakan. Hal ini memastikan bahwa gambar latar tetap terlihat proporsional dan relevan, terlepas dari perangkat yang digunakan untuk mengakses halaman.

Pengaturan backgroundPosition juga dapat dimanfaatkan dalam konteks pengembangan tema atau gaya global untuk seluruh situs. Dalam skenario ini, konsistensi posisi gambar latar antara berbagai elemen atau halaman memberikan kesan yang terorganisir dan profesional. Hal ini juga membantu dalam menciptakan identitas visual yang kuat untuk situs tersebut.

Sebagai penutup, pemahaman mendalam mengenai backgroundPosition memungkinkan desainer untuk mengelola elemen visual dengan lebih baik. Properti ini tidak hanya memberikan kontrol terhadap posisi gambar latar, tetapi juga membantu menciptakan pengalaman pengguna yang lebih baik melalui desain yang terencana dengan baik. Dengan pemanfaatan yang tepat, elemen latar belakang dapat menjadi komponen integral dari desain yang tidak hanya mendukung fungsi, tetapi juga memperkaya estetika halaman web secara keseluruhan.

Referensi Tambahan:

Artikel ini akan dibaca oleh: Elisa Fitri Rahmawati, Enggar Vania Paramesti, Enrico Dui Martinez, Erna Melina, dan Eva Widianingrum.

Location: Semarang, Kota Semarang, Jawa Tengah, Indonesia

5 komentar untuk "Mengatur Latar Belakang HTML backgroundPosition Style DOM"

AnonimSabtu, 16 April 2022 pukul 10.38.00 WIB
Jenis browser apa saja yang dapat digunakan untuk mengaktifkan properti backgroundPosition Style DOM pada HTML?
BalasHapus
Balasan
AnonimSelasa, 19 April 2022 pukul 09.52.00 WIB
Apa fungsi dari properti backgroundPosition Style DOM pada HTML?
BalasHapus
Balasan

Tambahkan komentar

Hubungi admin melalui Wa : +62-896-2414-6106

Respon komentar 7 x 24 jam, mohon bersabar jika komentar tidak langsung dipublikasi atau mendapatkan balasan secara langsung.

Bantu admin meningkatkan kualitas blog dengan melaporkan berbagai permasalahan seperti typo, link bermasalah, dan lain sebagainya melalui kolom komentar.

- Ikatlah Ilmu dengan Memostingkannya -

E-SISTEM:	Bahasa Pemrograman:
open_in_newE-RAPORT open_in_newE-PERPUS open_in_newE-LITERASI open_in_newE-KONSELING	open_in_newBahasa HTML open_in_newBahasa C open_in_newBahasa Java open_in_newBahasa C++
Materi Penelitian:	Administrasi Siswa:
open_in_newKlasifikasi Penelitian open_in_newPenelitian Tindakan Kelas open_in_newStatistika Penelitian open_in_newContoh Skripsi	open_in_newNilai dan Arsip open_in_newPerbaikan Data open_in_newKatalog Siswa open_in_newBuku Digital
Referensi Umum:	Magic
open_in_newMapel Informatika open_in_newLogo Instansi dan Organisasi open_in_newArtikel open_in_newTools dan Game	Mystery Box

PENELITIAN.ID

Mengatur Latar Belakang HTML backgroundPosition Style DOM

Blog Elfan

Blog Elfan

Blog Elfan

Blog Elfan

Blog Elfan

5 komentar untuk "Mengatur Latar Belakang HTML backgroundPosition Style DOM"

Menu Halaman Statis