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.

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. -->

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(

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. -->

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(

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. -->

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(

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. -->

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(

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>

<button

onclick="change5Origin()">

Change origin of background

image

</button>

<!-- Script untuk mengubah

backgroundOrigin -->

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.

Baca Juga:

Pengaturan latar belakang pada elemen HTML memainkan peran penting dalam tata letak dan estetika halaman web. Salah satu cara untuk mengatur latar belakang tersebut adalah dengan memanfaatkan properti backgroundOrigin. Properti ini digunakan untuk menentukan area awal pewarnaan latar belakang, baik berupa warna, gambar, atau pola, sehingga dapat disesuaikan dengan kebutuhan desain.

Secara umum, pengaturan latar belakang dapat mencakup berbagai aspek seperti posisi, pengulangan, ukuran, dan asal mula pewarnaan. Dalam hal ini, pengaturan asal pewarnaan melalui backgroundOrigin membantu menentukan apakah latar belakang akan dimulai dari batas konten, batas pembatas, atau batas bantalan elemen. Pemahaman terhadap hal ini memberikan kendali lebih besar terhadap tampilan elemen, sehingga dapat menciptakan hasil visual yang diinginkan.

Properti backgroundOrigin memiliki beberapa nilai yang dapat digunakan sesuai dengan kebutuhan desain. Nilai pertama adalah konten. Nilai ini memastikan bahwa latar belakang hanya muncul di area konten elemen, tanpa memperluas ke area bantalan atau pembatas. Pengaturan ini berguna untuk menciptakan tampilan yang lebih fokus pada isi elemen, sehingga elemen tersebut terlihat lebih bersih dan terorganisasi.

Nilai kedua adalah bantalan. Ketika nilai ini diterapkan, latar belakang akan dimulai dari batas bantalan elemen. Pengaturan ini memungkinkan latar belakang mencakup area yang lebih luas dibandingkan hanya konten, namun tetap tidak mencakup area pembatas. Pemilihan nilai ini sering digunakan ketika ingin menonjolkan elemen secara keseluruhan, tanpa mencakup area pembatas yang biasanya digunakan untuk garis tepi.

Nilai terakhir adalah pembatas. Dengan memilih nilai ini, latar belakang akan mencakup seluruh area elemen, termasuk pembatasnya. Hal ini memberikan efek visual yang menonjolkan keseluruhan elemen, karena latar belakang menyatu dengan garis tepi. Penggunaan nilai ini sangat cocok untuk elemen yang ingin diberi tampilan yang lebih menonjol dan menarik perhatian.

Penerapan backgroundOrigin dapat menghasilkan berbagai efek visual tergantung pada elemen yang digunakan. Misalnya, jika elemen memiliki batas pembatas yang cukup tebal, pemilihan nilai pembatas akan memberikan kesan menyeluruh pada latar belakang. Sebaliknya, jika elemen hanya memiliki sedikit ruang bantalan, penggunaan nilai bantalan dapat membantu menonjolkan isi elemen tanpa mengganggu batas tepi.

Penggunaan backgroundOrigin juga dapat dikombinasikan dengan properti lain, seperti posisi latar belakang dan pengulangan, untuk menciptakan efek yang lebih kompleks. Dengan menggabungkan pengaturan ini, hasil yang diinginkan dapat lebih mudah dicapai. Misalnya, latar belakang dengan pola tertentu dapat diatur agar dimulai dari area konten dan tidak mengulangi pola tersebut, sehingga menciptakan fokus visual pada elemen tertentu.

Dalam desain yang responsif, pengaturan backgroundOrigin menjadi semakin penting. Ketika tata letak elemen berubah sesuai dengan ukuran layar perangkat, asal mula latar belakang harus disesuaikan agar tetap mempertahankan estetika dan keterbacaan halaman. Misalnya, pada perangkat kecil seperti ponsel, latar belakang yang dimulai dari area konten dapat membantu mengurangi kekacauan visual, sementara pada layar yang lebih besar, penggunaan nilai bantalan atau pembatas dapat menciptakan tampilan yang lebih penuh.

Selain itu, penggunaan backgroundOrigin juga dapat dipertimbangkan dalam konteks aksesibilitas. Dengan memastikan bahwa latar belakang tidak mengganggu teks atau elemen interaktif lainnya, pengalaman pengguna dapat ditingkatkan. Sebagai contoh, jika latar belakang memiliki warna atau pola yang mencolok, pengaturan asal pewarnaan dari area konten dapat membantu memastikan teks tetap mudah dibaca dan tidak tertutup oleh latar belakang.

Dalam praktiknya, pengaturan backgroundOrigin dapat diterapkan pada berbagai jenis elemen, baik itu kontainer, tombol, maupun elemen dekoratif lainnya. Dengan memahami fungsi dan nilai-nilai yang tersedia, desainer web dapat memaksimalkan potensi estetika halaman web tanpa mengorbankan fungsionalitas atau kenyamanan pengguna. Hal ini menunjukkan bahwa pengaturan latar belakang tidak hanya soal tampilan, tetapi juga cara elemen-elemen saling berinteraksi dalam sebuah tata letak.

Dalam keseluruhan proses pembuatan halaman web, properti backgroundOrigin memberikan fleksibilitas tambahan untuk menyesuaikan desain sesuai kebutuhan. Dengan memanfaatkan properti ini secara efektif, hasil yang dihasilkan tidak hanya estetis tetapi juga memberikan pengalaman yang lebih baik kepada pengguna. Dengan demikian, properti ini menjadi salah satu alat penting dalam pengelolaan elemen visual pada halaman web yang modern dan responsif.

Selain itu, properti backgroundOrigin juga dapat digunakan untuk menciptakan kesan visual yang lebih dalam pada elemen-elemen tertentu dalam halaman web. Sebagai contoh, ketika digunakan bersamaan dengan efek bayangan atau transparansi, properti ini dapat membantu membangun hierarki visual yang lebih jelas antara elemen utama dan elemen pendukung. Hal ini sangat berguna pada desain antarmuka yang kompleks, dimana setiap elemen memiliki peran penting dalam memberikan informasi kepada pengguna.

Pada desain antarmuka modern, estetika sering kali berpadu dengan fungsionalitas. Pengaturan asal latar belakang melalui backgroundOrigin memungkinkan desainer untuk menyesuaikan elemen visual agar mendukung fungsionalitas elemen tersebut. Misalnya, tombol pada sebuah formulir dapat diatur dengan latar belakang yang dimulai dari area bantalan, sehingga memberikan tampilan yang seimbang antara isi tombol dan ruang di sekitarnya. Dengan cara ini, tombol menjadi lebih menarik dan mudah dikenali sebagai elemen yang dapat diklik.

Penggunaan backgroundOrigin juga sangat relevan dalam menciptakan identitas visual pada sebuah situs web. Ketika situs web dirancang untuk merepresentasikan sebuah merek atau tema tertentu, pengaturan asal latar belakang dapat membantu menyampaikan kesan yang diinginkan. Sebagai contoh, pada sebuah situs web bertema minimalis, pengaturan latar belakang yang dimulai dari area konten dapat menciptakan kesan bersih dan rapi. Sebaliknya, pada tema yang lebih dinamis, pengaturan latar belakang yang mencakup seluruh elemen dapat memberikan efek yang lebih hidup dan energik.

Kemampuan untuk mengatur asal latar belakang juga memberikan keuntungan dalam hal efisiensi desain. Dalam banyak kasus, penggunaan properti ini dapat mengurangi kebutuhan untuk membuat elemen-elemen tambahan atau gambar latar belakang khusus. Dengan hanya mengatur asal pewarnaan melalui backgroundOrigin, desainer dapat mencapai efek yang sama tanpa menambahkan elemen baru, sehingga menghemat waktu dan sumber daya.

Tidak hanya dalam konteks estetika, properti backgroundOrigin juga memainkan peran penting dalam pengoptimalan kinerja halaman web. Dengan mengatur asal latar belakang sesuai kebutuhan, ukuran berkas latar belakang dapat diminimalkan. Hal ini karena area pewarnaan yang tidak diperlukan dapat dihilangkan, sehingga mengurangi waktu pemuatan halaman. Efisiensi ini sangat penting, terutama untuk situs web yang ditujukan untuk pengguna dengan akses internet yang lambat atau perangkat dengan kemampuan terbatas.

Dalam pembuatan desain halaman web yang dinamis, pengaturan backgroundOrigin dapat disesuaikan melalui interaksi pengguna. Misalnya, pada sebuah elemen interaktif seperti tombol atau kartu informasi, asal latar belakang dapat berubah ketika elemen tersebut diarahkan atau diklik. Perubahan ini memberikan umpan balik visual kepada pengguna, sehingga meningkatkan pengalaman interaksi. Penggunaan semacam ini sering ditemukan pada situs web modern, yang memprioritaskan kenyamanan dan kepuasan pengguna.

Bagi pengembang, memahami penerapan backgroundOrigin memerlukan perhatian terhadap konsistensi antar elemen. Hal ini penting untuk menjaga harmonisasi visual dalam sebuah tata letak. Sebagai contoh, jika salah satu elemen menggunakan asal latar belakang dari batas pembatas, elemen lain yang memiliki fungsi serupa sebaiknya diatur dengan pengaturan yang sama. Pendekatan ini memastikan bahwa tata letak terlihat kohesif dan profesional.

Dalam dunia yang terus berkembang, properti seperti backgroundOrigin menjadi salah satu alat yang membantu desainer dan pengembang menciptakan halaman web yang lebih baik. Dengan memanfaatkan potensi penuh dari properti ini, halaman web dapat dirancang untuk memberikan pengalaman visual yang menarik, fungsional, dan efisien. Properti ini memberikan fleksibilitas untuk menciptakan berbagai variasi tampilan tanpa mengorbankan aspek teknis atau kecepatan pemuatan.

Kesimpulannya, pengaturan latar belakang HTML melalui backgroundOrigin merupakan salah satu cara untuk meningkatkan kualitas desain dan fungsionalitas halaman web. Dengan memahami cara kerja properti ini dan memanfaatkannya secara bijak, desainer dapat menciptakan tata letak yang tidak hanya menarik secara visual tetapi juga memenuhi kebutuhan pengguna. Properti ini menjadi salah satu elemen penting dalam pengelolaan latar belakang yang dapat diterapkan pada berbagai jenis desain halaman web, dari yang sederhana hingga yang paling kompleks.

Referensi Tambahan:

Artikel ini akan dibaca oleh: 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"

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
AnonimSelasa, 19 April 2022 pukul 10.03.00 WIB
Apa fungsi dari properti backgroundOrigin Style DOM pada HTML?
BalasHapus
Balasan
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

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 Menggunakan backgroundOrigin Style DOM

Blog Elfan

Blog Elfan

Blog Elfan

Blog Elfan

Blog Elfan

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

Menu Halaman Statis