Mengatur Gambar Latar Belakang HTML backgroundImage Style DOM
 | |
|
- 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.
<!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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg0fWTvYnJ4J4D_mj8vUbGpufPYHsq8Xsw2swXjSTyWIpM8K3UbEtnLBTytORLimGCcVDoHRuUrCyINBQFaCu30OBjFQwdo84zrF3aNZtbZSBa9JZk9ah7OTYVsDPard9U6oxAi6-y05Mg/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://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>
<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://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>
<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://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- 7 Value Properti backgroundSize Style DOM pada HTML [klik]
- 4 Value Properti backfaceVisibility Style DOM pada HTML [klik]
- 10 Value Properti Style Border DOM pada HTML [klik]
- 5 Value Properti borderBottom Style DOM pada HTML [klik]
- 4 Value Properti borderBottomColor Style DOM pada HTML [klik]
- 4 Value Properti borderBottomLeftRadius Style DOM pada HTML [klik]
- 4 Value Properti borderBottomRightRadius Style DOM pada HTML [klik]
5 komentar untuk "Mengatur Gambar Latar Belakang HTML backgroundImage Style DOM"
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 -
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