DAFTAR LABEL POPULER PENELITIAN.ID

Jangan Buka Artikel Ini!

Mengatur Gambar Latar Belakang HTML Menggunakan backgroundImage Style DOM

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

4 Contoh Penggunaan Properti backgroundImage Style DOM pada HTML
Ilustrasi backgroundImage HTML

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.

Baca Juga:

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

Hubungi admin melalui Wa : +62-896-2514-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 ~

Postingan populer dari blog ini (30 Hari)

Enkapsulasi Java dan Fungsinya

Specifier %d dan %i Bahasa C dan Fungsinya

4 Kesalahan Umum yang Sering Terjadi pada PTK

7 Paradigma Penelitian pada Statistika Penelitian

Cara Membuat Drag and Drop pada HTML

Postingan populer dari blog ini (All Time)

Enkapsulasi Java dan Fungsinya

Komunitas