10 Contoh Properti Background Style DOM pada HTML

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.

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.

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

Komentar

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

    BalasHapus
    Balasan
    1. 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. Apa yang dimaksud dengan properti style background DOM pada HTML?

    BalasHapus
    Balasan
    1. 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. 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

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