Lompat ke konten Lompat ke sidebar Lompat ke footer
Beranda / html

Mengatur Latar Belakang HTML Menggunakan backgroundOrigin Style DOM

Dipublikasikan Oleh: elfanmauludi 6 komentar
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.


Sebelum memahami lebih dalam materi tentang Mengatur Latar Belakang HTML Menggunakan backgroundOrigin Style DOM, terlebih dahulu pelajari materi tentang: Mengatur Klip Latar Belakang HTML backgroundClip Style DOM, Mengatur Perulangan Latar Belakang HTML backgroundRepeat Style DOM, dan Mengatur Latar Belakang HTML backgroundPosition Style DOM.

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.

Baca Juga:

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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg0fWTvYnJ4J4D_mj8vUbGpufPYHsq8Xsw2swXjSTyWIpM8K3UbEtnLBTytORLimGCcVDoHRuUrCyINBQFaCu30OBjFQwdo84zrF3aNZtbZSBa9JZk9ah7OTYVsDPard9U6oxAi6-y05Mg/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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg0fWTvYnJ4J4D_mj8vUbGpufPYHsq8Xsw2swXjSTyWIpM8K3UbEtnLBTytORLimGCcVDoHRuUrCyINBQFaCu30OBjFQwdo84zrF3aNZtbZSBa9JZk9ah7OTYVsDPard9U6oxAi6-y05Mg/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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg0fWTvYnJ4J4D_mj8vUbGpufPYHsq8Xsw2swXjSTyWIpM8K3UbEtnLBTytORLimGCcVDoHRuUrCyINBQFaCu30OBjFQwdo84zrF3aNZtbZSBa9JZk9ah7OTYVsDPard9U6oxAi6-y05Mg/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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg0fWTvYnJ4J4D_mj8vUbGpufPYHsq8Xsw2swXjSTyWIpM8K3UbEtnLBTytORLimGCcVDoHRuUrCyINBQFaCu30OBjFQwdo84zrF3aNZtbZSBa9JZk9ah7OTYVsDPard9U6oxAi6-y05Mg/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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg0fWTvYnJ4J4D_mj8vUbGpufPYHsq8Xsw2swXjSTyWIpM8K3UbEtnLBTytORLimGCcVDoHRuUrCyINBQFaCu30OBjFQwdo84zrF3aNZtbZSBa9JZk9ah7OTYVsDPard9U6oxAi6-y05Mg/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.

Artikel ini didedikasikan kepada: Erna Melina, Eva Widianingrum, Evina Diva Prasiwi, Fahrizal Febrilliantza Abdullah, dan Fauzan Fakturohman.
Location: Semarang, Kota Semarang, Jawa Tengah, Indonesia

6 komentar untuk "Mengatur Latar Belakang HTML Menggunakan backgroundOrigin Style DOM"

  1. AnonimMinggu, 17 April 2022 pukul 15.12.00 WIB

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

    BalasHapus
    Balasan
    1. AnonimMinggu, 17 April 2022 pukul 15.13.00 WIB

      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. AnonimSelasa, 19 April 2022 pukul 10.03.00 WIB

    Apa fungsi dari properti backgroundOrigin Style DOM pada HTML?

    BalasHapus
    Balasan
    1. AnonimSelasa, 19 April 2022 pukul 10.03.00 WIB

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

      Hapus
  3. AnonimSelasa, 19 April 2022 pukul 10.04.00 WIB

    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. AnonimSelasa, 19 April 2022 pukul 10.04.00 WIB

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

      Hapus

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 -