Lompat ke konten Lompat ke sidebar Lompat ke footer

Mengatur Gambar Latar Belakang HTML backgroundImage Style DOM

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


Sebelum memahami lebih dalam materi tentang Mengatur Gambar Latar Belakang HTML backgroundImage Style DOM, terlebih dahulu pelajari materi tentang: Mengatur Warna Latar Belakang HTML backgroundColor Style DOM [klik], Mengatur Gambar Latar Belakang HTML backgroundAttachment DOM [klik], dan Mengatur Latar Belakang HTML Menggunakan Background Style DOM [klik].

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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg0fWTvYnJ4J4D_mj8vUbGpufPYHsq8Xsw2swXjSTyWIpM8K3UbEtnLBTytORLimGCcVDoHRuUrCyINBQFaCu30OBjFQwdo84zrF3aNZtbZSBa9JZk9ah7OTYVsDPard9U6oxAi6-y05Mg/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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg0fWTvYnJ4J4D_mj8vUbGpufPYHsq8Xsw2swXjSTyWIpM8K3UbEtnLBTytORLimGCcVDoHRuUrCyINBQFaCu30OBjFQwdo84zrF3aNZtbZSBa9JZk9ah7OTYVsDPard9U6oxAi6-y05Mg/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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg0fWTvYnJ4J4D_mj8vUbGpufPYHsq8Xsw2swXjSTyWIpM8K3UbEtnLBTytORLimGCcVDoHRuUrCyINBQFaCu30OBjFQwdo84zrF3aNZtbZSBa9JZk9ah7OTYVsDPard9U6oxAi6-y05Mg/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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg0fWTvYnJ4J4D_mj8vUbGpufPYHsq8Xsw2swXjSTyWIpM8K3UbEtnLBTytORLimGCcVDoHRuUrCyINBQFaCu30OBjFQwdo84zrF3aNZtbZSBa9JZk9ah7OTYVsDPard9U6oxAi6-y05Mg/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


Artikel ini didedikasikan kepada: Eka Rositasari, Elisa Fitri Rahmawati, Enggar Vania Paramesti, Enrico Dui Martinez, dan Erna Melina.

5 komentar untuk "Mengatur Gambar Latar Belakang HTML backgroundImage Style DOM"

  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

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 -