5 Value Properti backgroundOrigin Style DOM pada HTML

Properti style backgroundOrigin DOM pada HTML digunakan untuk menentukan apakah image background berada dalam posisi relatif atau tidak sesuai dengan posisi yang telah ditentukan. Properti ini juga bisa membuat posisi relatif terhadap padding, border, atau konten aktual sekalipun.

Sintak:
  • berfungsi untuk mengembalikan nilai properti backgroundOrigin: object.style.backgroundOrigin
  • berfungsi untuk mengatur properti backgroundOrigin: object.style.backgroundOrigin = "padding-box|border-box|initial|content-box|inherit"

Return Values: berfungsi untuk mengembalikan sebuah nilai string yang merepresentasikan properti background-origin dari suatu elemen.

Property Values:
  • padding-box: nilai ini berfungsi untuk memposisikan image pada posisi relatif ke padding edge pada posisi top left. Nilai padding-box merupakan nilai default dari properti backgroundOrigin.
  • border-box: nilai ini berfungsi untuk memposisikan image pada posisi relatif ke border edge, yang bersifat absolut pada posisi top left.
  • content-box: nilai ini berfungsi untuk memposisikan image pada posisi relatif ke bagian awal dari konten aktual dari suatu elemen.
  • initial: digunakan untuk mengatur properti backgroundOrigin ke nilai default-nya.
  • inherit: digunakan untuk menerima nilai turunan properti dari elemen parent.

Contoh:

<!DOCTYPE html>

<html>

 

<head>

 

<title>

Properti Style 

backgroundOrigin DOM

</title>

 

<style>

.bg-img1 {

height: 200px;

width: 200px;

padding: 10px;

border: 10px dotted;

margin-bottom: 10px;

background: url(

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

no-repeat;

background-size: 100px;

background-origin: content-box;0}

</style>

 

</head>

 

<body>

 

<h1 

style="color: green">

Blog Elfan

</h1>

 

<b>

Properti Style 

backgroundOrigin DOM

</b>

 

<p>

Klik tombol untuk mengubah 

properti origin dari image 

background ke tipe 

padding-box.

</p>

 

<div 

class="bg-img1">

Blog TIk merupakan portal ilmu 

komputer yang digunakan untuk 

mempelajari berbagai ilmu 

pemrograman dan informasi 

menarik lainnya.

</div>

 

<button 

onclick="change1Origin()">

Change backgroundOrigin

</button>

 

<!-- Script untuk mengubah 

properti backgroundOrigin. -->

<script>

function change1Origin() 

{

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

elem.style.backgroundOrigin = 'padding-box';

}

</script>

 

</body>

 

</html>

Output:

Blog Elfan

Properti Style backgroundOrigin DOM

Klik tombol untuk mengubah properti origin dari image background ke tipe padding-box.

Blog TIk merupakan portal ilmu komputer yang digunakan untuk mempelajari berbagai ilmu pemrograman dan informasi menarik lainnya.


Contoh:

<!DOCTYPE html>

<html>

 

<head>

 

<title>

Properti Style 

backgroundOrigin DOM

</title>

 

<style>

.bg-img2 {

height: 200px;

width: 200px;

padding: 10px;

border: 10px dotted;

margin-bottom: 10px;

background: url(

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

no-repeat;

background-size: 100px;}

</style>

 

</head>

 

<body>

 

<h1 

style="color: green">

Blog Elfan

</h1>

 

<b>

Properti Style 

backgroundOrigin DOM

</b>

 

<p>

Klik tombol untk mengubah 

properti origin dari image 

background ke tipe 

padding-box.

</p>

 

<div 

class="bg-img2">

Blog TIK merupakan portal ilmu 

komputer yang digunakan untuk 

mempelajari pemrograman dan 

berbagai ilmu pengetahuan 

menarik lainnya.

</div>

 

<button 

onclick="change2Origin()">

Change backgroundOrigin

</button>

 

<!-- Script untku mengubah 

properti backgroundOrigin. -->

<script>

function change2Origin() 

{

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

elem.style.backgroundOrigin = 'border-box';

}

</script>

 

</body>

 

</html>

Output:

Blog Elfan

Properti Style backgroundOrigin DOM

Klik tombol untk mengubah properti origin dari image background ke tipe padding-box.

Blog TIK merupakan portal ilmu komputer yang digunakan untuk mempelajari pemrograman dan berbagai ilmu pengetahuan menarik lainnya.


Contoh:

<!DOCTYPE html>

<html>

 

<head>

 

<title>

Properti DOM Style 

backgroundOrigin

</title>

 

<style>

.bg-img3 

{

height: 200px;

width: 200px;

padding: 10px;

border: 10px dotted;

margin-bottom: 10px;

background: url(

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

no-repeat;

background-size: 100px;}

</style>

 

</head>

 

<body>

 

<h1 

style="color: green">

Blog Elfan

</h1>

 

<b>

Properti Style 

backgroundOrigin DOM

</b>

 

<p>

Klik tombol untuk mengubah 

properti origin dari image 

background ke tipe 

padding-box.

</p>

 

<div 

class="bg-img3">

Blog TIK merupakan portal ilmu 

komputer yang berisi berbagai 

pengetahuan tentang 

pemrograman dan informasi 

menarik lainnya.

</div>

 

<button 

onclick="change3Origin()">

Change backgroundOrigin

</button>

 

<!-- Script untuk mengubah 

properti backgroundOrigin. -->

<script>

function change3Origin() 

{

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

elem.style.backgroundOrigin = 'content-box';

}

</script>

 

</body>

 

</html>

Output:

Blog Elfan

Properti Style backgroundOrigin DOM

Klik tombol untuk mengubah properti origin dari image background ke tipe padding-box.

Blog TIK merupakan portal ilmu komputer yang berisi berbagai pengetahuan tentang pemrograman dan informasi menarik lainnya.


Contoh:

<!DOCTYPE html>

<html>

 

<head>

 

<title>

Properti Style 

backgroundOrigin DOM

</title>

 

<style>

.bg-img4 

{

height: 200px;

width: 200px;

padding: 10px;

border: 10px dotted;

margin-bottom: 10px;

background: url(

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

no-repeat;

background-size: 100px;

background-origin: content-box;}

</style>

 

</head>

 

<body>

 

<h1 

style="color: green">

Blog Elfan

</h1>

 

<b>

Properti Style 

backgroundOrigin DOM

</b>

 

<p>

Klik tombol untuk mengubah 

properti origin dari image 

background ke tipe 

padding-box.

</p>

 

<div 

class="bg-img4">

Blog TIK merupakan portal ilmu 

komputer yang mempelajari 

tentang bahasa pemrograman dan 

ilmu seputar TIK lainnya.

</div>

 

<button 

onclick="change4Origin()">

Change backgroundOrigin

</button>

 

<!-- Script untuk mengubah 

properti backgroundOrigin. -->

<script>

function change4Origin() 

{

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

elem.style.backgroundOrigin = 'initial';

}

</script>

 

</body>

 

</html>

Output:

Blog Elfan

Properti Style backgroundOrigin DOM

Klik tombol untuk mengubah properti origin dari image background ke tipe padding-box.

Blog TIK merupakan portal ilmu komputer yang mempelajari tentang bahasa pemrograman dan ilmu seputar TIK lainnya.


Contoh:

<!DOCTYPE html>

<html>

 

<head>

 

<title>

Properti Style 

backgroundOrigin DOM

</title>

 

<style>

/* Parent element */

#parent 

{

height: 250px;

width: 250px;

background-origin: border-box;}

 

.bg-img5 

{

height: 200px;

width: 200px;

padding: 10px;

margin-bottom: 50px;

border: 10px dotted;

background: url(

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

no-repeat;

background-size: 100px;}

</style>

 

</head>

 

<body>

 

<h1 

style="color: green">

Blog Elfan

</h1>

 

<b>

Properti Style 

backgroundOrigin DOM

</b>

 

<p>

Klik tombol untuk mengubah 

properti origin dari image 

background ke inherit.

</p>

 

<div 

id="parent">

 

<div 

class="bg-img5">

Blog TIk merupakan portal ilmu 

komputer untuk mempelajari 

berbagai ilmu pemrograman 

populer.

</div>

 

</div>

 

<button 

onclick="change5Origin()">

Change origin of background 

image

</button>

 

<!-- Script untuk mengubah 

backgroundOrigin -->

<script>

function change5Origin() 

{

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

elem.style.backgroundOrigin = 'inherit';

}

</script>

 

</body>

 

</html>

Output:

Blog Elfan

Properti Style backgroundOrigin DOM

Klik tombol untuk mengubah properti origin dari image background ke inherit.

Blog TIk merupakan portal ilmu komputer untuk mempelajari berbagai ilmu pemrograman populer.

Komentar

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

    BalasHapus
    Balasan
    1. Berikut adalah beberapa jenis browser yang dapat digunakan untuk mengaktifkan properti backgroundOrigin Style DOM pada HTML:
      1. Google Chrome 4.0
      2. Internet Explorer 9.0
      3. Firefox 4.0
      4. Opera 10.5
      5. Safari 3.0

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

    BalasHapus
    Balasan
    1. Properti backgroundOrigin Style DOM pada HTML digunakan untuk mengatur atau mengembalikan properti background-position terhadap nilai relatifnya.

      Hapus
  3. Apakah penggunaan properti backgroundAttachment Style DOM pada HTML memiliki dampak atau pengaruh terhadap penggunaan properti background Origin Style DOM pada HTML, jika kedua properti tersebut digunakan untuk memengaruhi suatu elemen yang sama?

    BalasHapus
    Balasan
    1. Iya, Jika properti background-attachment diatur ke tipe "fixed", maka penggunaan dari properti backgroundOrigin tidak akan berpengaruh apapun pada elemen yang dipengaruhinya.

      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