5 Contoh Penggunaan Properti backgroundPosition Style DOM pada HTML

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

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://4.bp.blogspot.com/-DVxqgRlQqnA/Yi9os9TXANI/AAAAAAAAOec/JE25o1CKDygtPFcDtHO1Gqn3rbGXtUtmQCK4BGAYYCw/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>

 

<script>

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:

url('https://4.bp.blogspot.com/-DVxqgRlQqnA/Yi9os9TXANI/AAAAAAAAOec/JE25o1CKDygtPFcDtHO1Gqn3rbGXtUtmQCK4BGAYYCw/s35/t%25252Bkotak%25252Bwhite.png')

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>

 

<script>

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:

url('https://4.bp.blogspot.com/-DVxqgRlQqnA/Yi9os9TXANI/AAAAAAAAOec/JE25o1CKDygtPFcDtHO1Gqn3rbGXtUtmQCK4BGAYYCw/s35/t%25252Bkotak%25252Bwhite.png')

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>

 

<script>

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:

url('https://4.bp.blogspot.com/-DVxqgRlQqnA/Yi9os9TXANI/AAAAAAAAOec/JE25o1CKDygtPFcDtHO1Gqn3rbGXtUtmQCK4BGAYYCw/s35/t%25252Bkotak%25252Bwhite.png')

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>

 

<script>

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:

url('https://4.bp.blogspot.com/-DVxqgRlQqnA/Yi9os9TXANI/AAAAAAAAOec/JE25o1CKDygtPFcDtHO1Gqn3rbGXtUtmQCK4BGAYYCw/s35/t%25252Bkotak%25252Bwhite.png')

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 class="bg-img5"></div>

</div>

 

<button onclick="changePos5()">

Change position of background 

image

</button>

 

<script>

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.

Komentar

  1. Jenis browser apa saja yang dapat digunakan untuk mengaktifkan properti backgroundPosition Style DOM pada HTML?

    BalasHapus
    Balasan
    1. Berikut adalah beberapa jenis browser yang dapat digunakan untuk mengaktifkan properti backgroundPosition Style DOM pada HTML:
      1. Chrome 1.0
      2. Internet Explorer 4.0
      3. Firefox 1.0
      4. Opera 3.5
      5. Safari 1.0

      Hapus
  2. Apa fungsi dari properti backgroundPosition Style DOM pada HTML?

    BalasHapus
    Balasan
    1. Properti backgroundPostion Style DOM pada HTML digunakan untuk menetapkan atau mengembalikan nilai dari posisi gambar latar belakang dalam sebuah elemen pada dokumen HTML.

      Hapus
    2. Properti backgroundPosition Style DOM pada HTML digunakan untuk menetapkan atau mendapatkan posisi gambar latar belakang dari suatu elemen.

      Hapus

Posting Komentar

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

*Jika terdapat typo, link bermasalah, dan lain sebagainya, pengunjung dapat melaporkan permasalahan tersebut melalui WA: +62-896-2514-6106




~ Ikatlah Ilmu dengan Memostingkannya ~

Referensi Tambahan:

Enkapsulasi pada Java

2 Jenis Utama Kegiatan Penelitian Berdasarkan Waktunya, Crosssectional Salah Satunya

6 Contoh Program Method Overloading pada Java

3 Jenis Utama Looping pada Java

Perbedaan stdio.h dan stdlib.h pada Bahasa C