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

Mengatur Latar Belakang HTML Menggunakan Background Style DOM

Dipublikasikan Oleh: elfanmauludi 5 komentar
Properti Style background DOM pada HTML merupakan properti singkat yang digunakan untuk mengatur atau mengembalikan nilai background dari suatu elemen. Properti ini dapat digunakan untuk membantu memanipulasi satu atau lebih dari nilai properti background.


Sebelum memahami lebih dalam materi tentang Mengatur Latar Belakang HTML Menggunakan Background Style DOM, terlebih dahulu pelajari materi tentang: Memeriksa Status Animasi HTML Menggunakan animationPlayState Style DOM, Mengatur Waktu Transisi HTML animationTimingFunction Style DOM, dan Mengatur Nama Animasi HTML Menggunakan animationName Style DOM.

Sintak:
  • berfungsi untuk mengembalikan properti backgound: object.style.background
  • berfungsi untuk mengatur properti background: object.style.background = "color image repeat attachment position size origin clip|initial|inherit"

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

Baca Juga:

Property Values: terdapat 8 jenis properti yang dideskripsikan sebagai berikut.
  • color: digunakan untuk mengatur warna background dari suatu elemen. Nilai ini berkorensponden dengan properti background-color.
  • image: digunakan untuk mengatur gambar background dari suatu elemen. Nilai ini berkorensponden dengan properti background-image.
  • repeat: digunakan untuk mengatur bagaimana sebuah image background dapat diulang kemunculannya sepanjang koordinat x dan y. Nilai ini berkorensponden dengan properti background-repeat.
  • attachment: digunakan untuk mengatur apakah gambar dapat melakukan scroll atau tidak, atau tetap pada nilai ukuran yang telah ditentukan sebelumnya. Nilai ini berkorensponden dengan properti background-attachment.
  • position: digunakan untuk mengatur posisi awalan dari suatu image background. Nilai ini berkoresponden dengan properti background-position.
  • size: digunakan untuk mengatur ukuran dari unit image background atau dalam satuan nilai persen. Nilai ini berkoresponden dengan properti background-size.
  • origin: digunakan untuk menentukan posisi asli dari sebuah image background. Nilai ini berkoresponden dengan properti background-origin.
  • clip: digunakan untuk mengatur area painting dari sebuah image background. Nilai ini berkorespondensi dengan properti background-clip.
  • initial: digunakan untuk mengatur properti ke nilai default-nya.
  • inherit: digunakan untuk melakukan inherit ke nilai parent-nya.

Contoh: properti background-color.

<!DOCTYPE html>

<html>

 

<head>

 

<title>

Properti DOM Style Background

</title>

 

<style>

.MNN 

{

height: 250px;

width: 250px;

border-style: solid;

}

</style>

 

</head>

 

<body>

 

<h1 

style="color: green">

Blog Elfan

</h1>

 

<b>

Properti DOM Style Background

</b>

 

<p>

Klik tombol untuk mengatur 

warna background.

</p>

 

<div 

class="MNN">

</div>

 

<button 

onclick="setBg()">

Set background color

</button>

 

<script>

function setBg() 

{

elem = document.querySelector('.MNN');

elem.style.background = "green";

}

</script>

 

</body>

 

</html>


Contoh: properti background-image.

<!DOCTYPE html>

<html>

 

<head>

 

<title>

Properti DOM Style Background

</title>

 

<style>

.MKN 

{

height: 250px;

width: 250px;

border-style: solid;

}

</style>

 

</head>

 

<body>

 

<h1 

style="color: green">

Blog Elfan

</h1>

 

<b>

Properti DOM Style Background

</b>

 

<p>

Klok tombol untuk mengatur 

warna background.

</p>

 

<div 

class="MKN">

</div>

 

<button 

onclick="setBg()">

Set background color

</button>

 

<script>

function setBg() 

{

elem = document.querySelector('.MKN');

elem.style.background =

"url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg0fWTvYnJ4J4D_mj8vUbGpufPYHsq8Xsw2swXjSTyWIpM8K3UbEtnLBTytORLimGCcVDoHRuUrCyINBQFaCu30OBjFQwdo84zrF3aNZtbZSBa9JZk9ah7OTYVsDPard9U6oxAi6-y05Mg/s35/t%25252Bkotak%25252Bwhite.png')";

}

</script>

 

</body>

 

</html>


Contoh: ilustrasi penggunaan properti repeat-x ke image background sepanjang koordinat x.

<!DOCTYPE html>

<html>

 

<head>

 

<title>

Properti DOM Style Background

</title>

 

<style>

.MKK 

{

height: 250px;

width: 250px;

border-style: solid;

}

</style>

 

</head>

 

<body>

 

<h1 

style="color: green">

Blog Elfan

</h1>

 

<b>

Properti DOM Style Background

</b>

 

<p>

Klik tombol untuk mengatur 

warna background.

</p>

 

<div 

class="MKK">

</div>

 

<button 

onclick="setBg()">

Set background color

</button>

 

<script>

function setBg() 

{

elem = document.querySelector('.MKK');

elem.style.background =

"url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg0fWTvYnJ4J4D_mj8vUbGpufPYHsq8Xsw2swXjSTyWIpM8K3UbEtnLBTytORLimGCcVDoHRuUrCyINBQFaCu30OBjFQwdo84zrF3aNZtbZSBa9JZk9ah7OTYVsDPard9U6oxAi6-y05Mg/s35/t%25252Bkotak%25252Bwhite.png') repeat-x";

}

</script>

 

</body>

 

</html>


Contoh: mengatur properti attachment ke tipe 'scroll'.

<!DOCTYPE html>

<html>

 

<head>

 

<title>

Properti DOM Style Background

</title>

 

<style>

body 

{

background: url(

'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg0fWTvYnJ4J4D_mj8vUbGpufPYHsq8Xsw2swXjSTyWIpM8K3UbEtnLBTytORLimGCcVDoHRuUrCyINBQFaCu30OBjFQwdo84zrF3aNZtbZSBa9JZk9ah7OTYVsDPard9U6oxAi6-y05Mg/s35/t%25252Bkotak%25252Bwhite.png')

no-repeat right top / 200px;

background-attachment: fixed;}

 

#scrolling-area 

{

height: 1000px;}

</style>

 

</head>

 

<body>

 

<h1 

style="color: green">

Blog Elfan

</h1>

 

<b>

Properti DOM Style Background

</b>

 

<p>

Klik tombol untuk mengatur 

warna background.

</p>

 

<div 

class="MKI">

</div>

 

<button 

onclick="setBg()">

Set background color

</button>

 

<div 

id="scrolling-area">

<br>

Merupakan area besar untuk 

scroll.

</div>

 

<script>

function setBg() 

{

document.body.style.backgroundAttachment

= 'scroll';

}

</script>

 

</body>

 

</html>


Contoh: mengatur posisi dari image background ke tipe 'center'.

<!DOCTYPE html>

<html>

 

<head>

 

<title>

Properti DOM Style Background

</title>

 

<style>

.NNT 

{

height: 250px;

width: 250px;

border-style: solid;

}

</style>

 

</head>

 

<body>

 

<h1 

style="color: green">

Blog Elfan

</h1>

 

<b>

Properti DOM Style Background

</b>

 

<p>

Klok tombol untuk mengatur 

warna background.

</p>

 

<div 

class="NNT">

</div>

 

<button 

onclick="setBg()">

Set background color

</button>

 

<script>

function setBg() 

{

elem = document.querySelector('.NNT');

elem.style.background =

"url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg0fWTvYnJ4J4D_mj8vUbGpufPYHsq8Xsw2swXjSTyWIpM8K3UbEtnLBTytORLimGCcVDoHRuUrCyINBQFaCu30OBjFQwdo84zrF3aNZtbZSBa9JZk9ah7OTYVsDPard9U6oxAi6-y05Mg/s35/t%25252Bkotak%25252Bwhite.png') no-repeat center";

}

</script>

 

</body>

 

</html>


Contoh: ilustrasi pengaturan ukuran image background ke '200px' untuk ukuran lebar, dan '150px' untuk ukuran panjang.

<!DOCTYPE html>

<html>

 

<head>

 

<title>

Properti DOM Style Background

</title>

 

<style>

.KKL 

{

height: 250px;

width: 250px;

border-style: solid;

}

</style>

 

</head>

 

<body>

 

<h1 

style="color: green">

Blog Elfan

</h1>

 

<b>

Properti DOM Style Background

</b>

 

<p>

Klik tombol untuk mengatur 

warna background

</p>

 

<div 

class="KKL">

</div>

 

<button 

onclick="setBg()">

Set background color

</button>

 

<script>

function setBg() 

{

elem = document.querySelector('.KKL');

elem.style.background =

"url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg0fWTvYnJ4J4D_mj8vUbGpufPYHsq8Xsw2swXjSTyWIpM8K3UbEtnLBTytORLimGCcVDoHRuUrCyINBQFaCu30OBjFQwdo84zrF3aNZtbZSBa9JZk9ah7OTYVsDPard9U6oxAi6-y05Mg/s35/t%25252Bkotak%25252Bwhite.png') no-repeat center / 200px 150px ";

}

</script>

 

</body>

 

</html>


Contoh: ilustrasi pengaturan background asli ke tipe 'border-box'.

<!DOCTYPE html>

<html>

 

<head>

 

<title>

Properti DOM Style Background

</title>

 

<style>

.KLK 

{

height: 250px;

width: 250px;

padding: 20px;

border: 10px dotted;

}

</style>

 

</head>

 

<body>

 

<h1 

style="color: green">

Blog Elfan

</h1>

 

<b>

Properti DOM Style Background

</b>

 

<p>

Klik tombol untuk mengatur 

gambar background.

</p>

 

<div 

class="KLK">

</div>

 

<button 

onclick="setBg()">

Set background image

</button>

 

<script>

function setBg() 

{

elem = document.querySelector('.KLK');

elem.style.background =

"url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg0fWTvYnJ4J4D_mj8vUbGpufPYHsq8Xsw2swXjSTyWIpM8K3UbEtnLBTytORLimGCcVDoHRuUrCyINBQFaCu30OBjFQwdo84zrF3aNZtbZSBa9JZk9ah7OTYVsDPard9U6oxAi6-y05Mg/s35/t%25252Bkotak%25252Bwhite.png') no-repeat border-box";

}

</script>

 

</body>

 

</html>


Contoh: ilustrasi pengaturan clip background ke tipe 'content-box'.

<!DOCTYPE html>

<html>

 

<head>

 

<title>

Properti DOM Style Background

</title>

 

<style>

.LLM 

{

height: 250px;

width: 250px;

border: 10px dotted;

}

</style>

 

</head>

 

<body>

 

<h1 

style="color: green">

Blog Elfan

</h1>

 

<b>

Properti DOM Style Background

</b>

 

<p>

Klik tombol untuk mengatur 

warna background.

</p>

 

<div 

class="LLM">

</div>

 

<button 

onclick="setBg()">

Set background color

</button>

 

<script>

function setBg() 

{

elem = document.querySelector('.LLM');

elem.style.background = "green content-box";

}

</script>

 

</body>

 

</html>


Contoh: ilustrasi pengaturan nilai properti ke nilai default-nya.

<!DOCTYPE html>

<html>

 

<head>

 

<title>

Properti DOM Style Background

</title>

 

<style>

.DDM 

{

height: 250px;

width: 250px;

border-style: solid;

background: green

}

</style>

 

</head>

 

<body>

 

<h1 

style="color: green">

Blog Elfan

</h1>

 

<b>

Properti DOM Style Background

</b>

 

<p>

Klik tombol untuk mengatur 

background ke initial.

</p>

 

<div 

class="DDM">

</div>

 

<button 

onclick="setBg()">

Set background

</button>

 

<script>

function setBg() 

{

elem = document.querySelector('.DDM');

elem.style.background = "initial";

}

</script>

 

</body>

 

</html>


Contoh: digunakan untuk inherit properti dari property parent-nya.

<!DOCTYPE html>

<html>

 

<head>

 

<title>

Properti DOM Style Background

</title>

 

<style>

.MMO 

{

margin: 20px;

height: 100px;

width: 100px;

border: 5px solid;}

 

#parent 

{

height: 250px;

width: 250px;

border: 1px solid;

background:

url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg0fWTvYnJ4J4D_mj8vUbGpufPYHsq8Xsw2swXjSTyWIpM8K3UbEtnLBTytORLimGCcVDoHRuUrCyINBQFaCu30OBjFQwdo84zrF3aNZtbZSBa9JZk9ah7OTYVsDPard9U6oxAi6-y05Mg/s35/t%25252Bkotak%25252Bwhite.png') center / cover;}

</style>

 

</head>

 

<body>

 

<h1 

style="color: green">

Blog Elfan

</h1>

 

<b>

Properti DOM Style Background

</b>

 

<p>

Klik tombol untuk mengatur 

background ke inherit-nya.

</p>

 

<div 

id="parent">

 

<div 

class="MMO">

</div>

 

</div>

 

<button 

onclick="setBg()">

Set background

</button>

 

<script>

function setBg() 

{

elem = document.querySelector('.MMO');

elem.style.background = "inherit";

}

</script>

 

</body>

 

</html>


Artikel ini didedikasikan kepada: Diyah Ayu Fatmawati, Dwi Anggraini, Ega Ayu Tri Paningsih, Eka Rositasari, dan Elisa Fitri Rahmawati.
Location: Semarang, Kota Semarang, Jawa Tengah, Indonesia

5 komentar untuk "Mengatur Latar Belakang HTML Menggunakan Background Style DOM"

  1. AnonimJumat, 15 April 2022 pukul 09.36.00 WIB

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

    BalasHapus
    Balasan
    1. AnonimJumat, 15 April 2022 pukul 09.36.00 WIB

      Berikut adalah beberapa jenis browser yang dapat digunakan untuk mengaktifkan Style Backround 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. AnonimSelasa, 19 April 2022 pukul 09.38.00 WIB

    Apa yang dimaksud dengan properti style background DOM pada HTML?

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

      Properti background style DOM pada HTML berfungsi untuk mengatur atau mengembalikan nilai hingga delapan properti background yang terpisah, dalam bentuk singkatan. Dengan properti ini, pengembang dapat mengatur atau mengembalikan satu atau lebih dari beberapa urutan berikut, yaitu: background-color, background-image, background-repeat, dan lain sebagainya.

      Hapus
    2. AnonimSelasa, 19 April 2022 pukul 09.40.00 WIB

      Berfungsi untuk mengembalikan style background pada HTML DOM dimana properti ini merupakan properti singkatan yang digunakan untuk mengatur atau mengembalikan nilai dari suatu elemen. Properti ini juga dapat digunakan untuk membantu memanipulasi satu atau lebih dari delapan properti background.

      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 -