4 Contoh Penggunaan Properti backgroundImage Style DOM pada 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.
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>
<p
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 backgroundImageContoh:
<!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>
<p
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 backgroundImageContoh:
<!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>
<p
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 DOMContoh:
<!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:.jpg)
.jpg)
.jpg)
.jpg)
.jpg)
.jpg)
.jpg)
Jenis browser apa saja yang dapat digunakan untuk mengaktifkan properti backgroundImage Style DOM pada HTML?
BalasHapusBerikut adalah beberapa jenis browser yang dapat digunakan untuk mengaktifkan properti backgroundImage Style DOM pada HTML:
Hapus1. Chrome 1.0
2. Internet Explorer 4.0
3. Firefox 1.0
4. Opera 3.5
5. Safari 1.0
Apa yang dimaksud dengan properti backgroundImage Style DOM pada HTML?
BalasHapusProperti backgroundImage Style DOM pada HTML digunakan untuk mengatur atau mengembalikan nilai gambar atau background dari suatu elemen pada dokumen html.
HapusSelain 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