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.

Baca Juga:

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.

Referensi Tambahan:

Artikel ini didedikasikan kepada: 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 -
- Big things start from small things -

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