4 Contoh Penggunaan Properti backgroundImage Style DOM pada HTML

Properti Style backgroundImage DOM pada HTML digunakan untuk mengatur atau mengembalikan image background dari suatu elemen.

Sintak:
  • untuk mendapatkan nilai properti backgroundImage: object.style.backgroundImage
  • untuk mengatur properti backgroundImage: object.style.backgroundImage = "image|none|initial|inherit"

Return Values: berfungsi untuk mengembalikan sebuah string yang merepresentasikan image background.

Property Values:
  • image: berfungsi untuk mengatur properti untuk menggunakan image tertentu, dimana image path yang digunakan telah ditentukan terlebih dahulu pada fungsi url().
  • none: berfungsi untuk mengatur properti untuk tidak menggunakan image background.
  • initial: berfungsi untuk mengatur properti backgroundImage ke nilai default-nya.
  • inherit: berfungsi untuk menerima property inherit dari properti parent.

Contoh:

<!DOCTYPE html>

<html 

lang="en">

 

<head>

 

<title>

Properti Style backgroundImage 

DOM

</title>

 

<style>

.bg-img 

{

border: solid;

height: 180px;

width: 200px;

}

</style>

 

</head>

 

<body>

 

<h1 

style="color: green">

Blog Elfan

</h1>

 

<b>

Properti DOM Style 

backgroundImage

</b>

 

<

class="bg-img">

</p>

 

<button 

onclick="changeImage()">

Change source of background 

image

</button>

 

<script>

function changeImage() 

{

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

// Pengaturan backgroundImage 

// ke url

elem.style.backgroundImage =

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

}

</script>

 

</body>

 

</html>

Output:

Blog Elfan

Properti DOM Style backgroundImage



Contoh:

<!DOCTYPE html>

<html 

lang="en">

 

<head>

 

<title>

Properit Style backgroundImage 

DOM

</title>

 

<style>

.bg-img2 

{

border: solid;

height: 180px;

width: 200px;

background-image:

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

}

</style>

 

</head>

 

<body>

 

<h1 

style="color: green">

Blog Elfan

</h1>

 

<b>

Properti Style backgroundImage

</b>

 

<

class="bg-img2">

</p>

 

<button 

onclick="changeImage2()">

Change source of background 

image

</button>

 

<script>

function changeImage2() 

{

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

// Pengaturan backgroundImage 

// ke tipe none

elem.style.backgroundImage = "none";

}

</script>

 

</body>

 

</html>

Output:

Blog Elfan

Properti Style backgroundImage



Contoh:

<!DOCTYPE html>

<html 

lang="en">

 

<head>

 

<title>

Properti Style backgroundImage 

DOM

</title>

 

<style>

.bg-img3 

{

border: solid;

height: 180px;

width: 200px;

background-image:

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

}

</style>

 

</head>

 

<body>

 

<h1 

style="color: green">

Blog Elfan

</h1>

 

<b>

Properti Style backgroundImage 

DOM

</b>

 

<

class="bg-img3">

</p>

 

<button 

onclick="changeImage3()">

Change source of background 

image

</button>

 

<script>

function changeImage3() 

{

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

// Pengaturan backgroundImage // ke tipe initial

elem.style.backgroundImage = "initial";

}

</script>

 

</body>

 

</html>

Output:

Blog Elfan

Properti Style backgroundImage DOM



Contoh:

<!DOCTYPE html>

<html 

lang="en">

 

<head>

 

<title>

Properti Style backgroundImage 

DOM

</title>

 

<style>

#parent 

{

border: solid;

height: 200px;

width: 300px;

background:

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

no-repeat;

background-size: cover;}

 

.bg-img4 

{

border: dashed;

height: 100px;

width: 100px;

background-size: cover;}

</style>

 

</head>

 

<body>

 

<h1 

style="color: green">

Blog Elfan

</h1>

 

<b>

Properti Style backgroundImage 

DOM

</b>

 

<div 

id="parent">

<p class="bg-img4"></p>

</div>

 

<button 

onclick="changeImage4()">

Change source of background 

image

</button>

 

<script>

function changeImage4() 

{

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

// Pengaturan backgroundImage // ke tipe inherit

elem.style.backgroundImage = "inherit";

}

</script>

 

</body>

 

</html>

Output:

Blog Elfan

Properti Style backgroundImage DOM

Komentar

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

    BalasHapus
    Balasan
    1. Berikut adalah beberapa jenis browser yang dapat digunakan untuk mengaktifkan properti backgroundImage Style 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 backgroundImage Style DOM pada HTML?

    BalasHapus
    Balasan
    1. Properti backgroundImage Style DOM pada HTML digunakan untuk mengatur atau mengembalikan nilai gambar atau background dari suatu elemen pada dokumen html.

      Hapus
    2. Selain gambar latar belakang, user juga harus menentukan warna dari latar belakang terlebih dahulu, yang tujuannya adalah jika gambar latar belakang tidak tersedia maka secara otomatis dapat diganti dengan warna latar belakang.

      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