Mengatur Latar Belakang HTML Menggunakan Background Style DOM
 |
| Ilustrasi Background Style HTML |
- berfungsi untuk mengembalikan properti backgound: object.style.background
- berfungsi untuk mengatur properti background: object.style.background = "color image repeat attachment position size origin clip|initial|inherit"
Return Values: berfungsi untuk mengembalikan sebuah nilai string yang merepresentasikan background dari suatu elemen.
Property Values: terdapat 8 jenis properti yang dideskripsikan sebagai berikut.
- color: digunakan untuk mengatur warna background dari suatu elemen. Nilai ini berkorensponden dengan properti background-color.
- image: digunakan untuk mengatur gambar background dari suatu elemen. Nilai ini berkorensponden dengan properti background-image.
- repeat: digunakan untuk mengatur bagaimana sebuah image background dapat diulang kemunculannya sepanjang koordinat x dan y. Nilai ini berkorensponden dengan properti background-repeat.
- attachment: digunakan untuk mengatur apakah gambar dapat melakukan scroll atau tidak, atau tetap pada nilai ukuran yang telah ditentukan sebelumnya. Nilai ini berkorensponden dengan properti background-attachment.
- position: digunakan untuk mengatur posisi awalan dari suatu image background. Nilai ini berkoresponden dengan properti background-position.
- size: digunakan untuk mengatur ukuran dari unit image background atau dalam satuan nilai persen. Nilai ini berkoresponden dengan properti background-size.
- origin: digunakan untuk menentukan posisi asli dari sebuah image background. Nilai ini berkoresponden dengan properti background-origin.
- clip: digunakan untuk mengatur area painting dari sebuah image background. Nilai ini berkorespondensi dengan properti background-clip.
- initial: digunakan untuk mengatur properti ke nilai default-nya.
- inherit: digunakan untuk melakukan inherit ke nilai parent-nya.
Contoh: properti background-color.
<!DOCTYPE html>
<html>
<head>
<title>
Properti DOM Style Background
</title>
<style>
.MNN
{
height: 250px;
width: 250px;
border-style: solid;
}
</style>
</head>
<body>
<h1
style="color: green">
Blog Elfan
</h1>
<b>
Properti DOM Style Background
</b>
<p>
Klik tombol untuk mengatur
warna background.
</p>
<div
class="MNN">
</div>
<button
onclick="setBg()">
Set background color
</button>
<script>
function setBg()
{
elem = document.querySelector('.MNN');
elem.style.background = "green";
}
</script>
</body>
</html>
Contoh: properti background-image.
<!DOCTYPE html>
<html>
<head>
<title>
Properti DOM Style Background
</title>
<style>
.MKN
{
height: 250px;
width: 250px;
border-style: solid;
}
</style>
</head>
<body>
<h1
style="color: green">
Blog Elfan
</h1>
<b>
Properti DOM Style Background
</b>
<p>
Klok tombol untuk mengatur
warna background.
</p>
<div
class="MKN">
</div>
<button
onclick="setBg()">
Set background color
</button>
<script>
function setBg()
{
elem = document.querySelector('.MKN');
elem.style.background =
"url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg0fWTvYnJ4J4D_mj8vUbGpufPYHsq8Xsw2swXjSTyWIpM8K3UbEtnLBTytORLimGCcVDoHRuUrCyINBQFaCu30OBjFQwdo84zrF3aNZtbZSBa9JZk9ah7OTYVsDPard9U6oxAi6-y05Mg/s35/t%25252Bkotak%25252Bwhite.png')";
}
</script>
</body>
</html>
Contoh: ilustrasi penggunaan properti repeat-x ke image background sepanjang koordinat x.
<!DOCTYPE html>
<html>
<head>
<title>
Properti DOM Style Background
</title>
<style>
.MKK
{
height: 250px;
width: 250px;
border-style: solid;
}
</style>
</head>
<body>
<h1
style="color: green">
Blog Elfan
</h1>
<b>
Properti DOM Style Background
</b>
<p>
Klik tombol untuk mengatur
warna background.
</p>
<div
class="MKK">
</div>
<button
onclick="setBg()">
Set background color
</button>
<script>
function setBg()
{
elem = document.querySelector('.MKK');
elem.style.background =
"url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg0fWTvYnJ4J4D_mj8vUbGpufPYHsq8Xsw2swXjSTyWIpM8K3UbEtnLBTytORLimGCcVDoHRuUrCyINBQFaCu30OBjFQwdo84zrF3aNZtbZSBa9JZk9ah7OTYVsDPard9U6oxAi6-y05Mg/s35/t%25252Bkotak%25252Bwhite.png') repeat-x";
}
</script>
</body>
</html>
Contoh: mengatur properti attachment ke tipe 'scroll'.
<!DOCTYPE html>
<html>
<head>
<title>
Properti DOM Style Background
</title>
<style>
body
{
background: url(
'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg0fWTvYnJ4J4D_mj8vUbGpufPYHsq8Xsw2swXjSTyWIpM8K3UbEtnLBTytORLimGCcVDoHRuUrCyINBQFaCu30OBjFQwdo84zrF3aNZtbZSBa9JZk9ah7OTYVsDPard9U6oxAi6-y05Mg/s35/t%25252Bkotak%25252Bwhite.png')
no-repeat right top / 200px;
background-attachment: fixed;}
#scrolling-area
{
height: 1000px;}
</style>
</head>
<body>
<h1
style="color: green">
Blog Elfan
</h1>
<b>
Properti DOM Style Background
</b>
<p>
Klik tombol untuk mengatur
warna background.
</p>
<div
class="MKI">
</div>
<button
onclick="setBg()">
Set background color
</button>
<div
id="scrolling-area">
<br>
Merupakan area besar untuk
scroll.
</div>
<script>
function setBg()
{
document.body.style.backgroundAttachment
= 'scroll';
}
</script>
</body>
</html>
Contoh: mengatur posisi dari image background ke tipe 'center'.
<!DOCTYPE html>
<html>
<head>
<title>
Properti DOM Style Background
</title>
<style>
.NNT
{
height: 250px;
width: 250px;
border-style: solid;
}
</style>
</head>
<body>
<h1
style="color: green">
Blog Elfan
</h1>
<b>
Properti DOM Style Background
</b>
<p>
Klok tombol untuk mengatur
warna background.
</p>
<div
class="NNT">
</div>
<button
onclick="setBg()">
Set background color
</button>
<script>
function setBg()
{
elem = document.querySelector('.NNT');
elem.style.background =
"url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg0fWTvYnJ4J4D_mj8vUbGpufPYHsq8Xsw2swXjSTyWIpM8K3UbEtnLBTytORLimGCcVDoHRuUrCyINBQFaCu30OBjFQwdo84zrF3aNZtbZSBa9JZk9ah7OTYVsDPard9U6oxAi6-y05Mg/s35/t%25252Bkotak%25252Bwhite.png') no-repeat center";
}
</script>
</body>
</html>
Contoh: ilustrasi pengaturan ukuran image background ke '200px' untuk ukuran lebar, dan '150px' untuk ukuran panjang.
<!DOCTYPE html>
<html>
<head>
<title>
Properti DOM Style Background
</title>
<style>
.KKL
{
height: 250px;
width: 250px;
border-style: solid;
}
</style>
</head>
<body>
<h1
style="color: green">
Blog Elfan
</h1>
<b>
Properti DOM Style Background
</b>
<p>
Klik tombol untuk mengatur
warna background
</p>
<div
class="KKL">
</div>
<button
onclick="setBg()">
Set background color
</button>
<script>
function setBg()
{
elem = document.querySelector('.KKL');
elem.style.background =
"url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg0fWTvYnJ4J4D_mj8vUbGpufPYHsq8Xsw2swXjSTyWIpM8K3UbEtnLBTytORLimGCcVDoHRuUrCyINBQFaCu30OBjFQwdo84zrF3aNZtbZSBa9JZk9ah7OTYVsDPard9U6oxAi6-y05Mg/s35/t%25252Bkotak%25252Bwhite.png') no-repeat center / 200px 150px ";
}
</script>
</body>
</html>
Contoh: ilustrasi pengaturan background asli ke tipe 'border-box'.
<!DOCTYPE html>
<html>
<head>
<title>
Properti DOM Style Background
</title>
<style>
.KLK
{
height: 250px;
width: 250px;
padding: 20px;
border: 10px dotted;
}
</style>
</head>
<body>
<h1
style="color: green">
Blog Elfan
</h1>
<b>
Properti DOM Style Background
</b>
<p>
Klik tombol untuk mengatur
gambar background.
</p>
<div
class="KLK">
</div>
<button
onclick="setBg()">
Set background image
</button>
<script>
function setBg()
{
elem = document.querySelector('.KLK');
elem.style.background =
"url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg0fWTvYnJ4J4D_mj8vUbGpufPYHsq8Xsw2swXjSTyWIpM8K3UbEtnLBTytORLimGCcVDoHRuUrCyINBQFaCu30OBjFQwdo84zrF3aNZtbZSBa9JZk9ah7OTYVsDPard9U6oxAi6-y05Mg/s35/t%25252Bkotak%25252Bwhite.png') no-repeat border-box";
}
</script>
</body>
</html>
Contoh: ilustrasi pengaturan clip background ke tipe 'content-box'.
<!DOCTYPE html>
<html>
<head>
<title>
Properti DOM Style Background
</title>
<style>
.LLM
{
height: 250px;
width: 250px;
border: 10px dotted;
}
</style>
</head>
<body>
<h1
style="color: green">
Blog Elfan
</h1>
<b>
Properti DOM Style Background
</b>
<p>
Klik tombol untuk mengatur
warna background.
</p>
<div
class="LLM">
</div>
<button
onclick="setBg()">
Set background color
</button>
<script>
function setBg()
{
elem = document.querySelector('.LLM');
elem.style.background = "green content-box";
}
</script>
</body>
</html>
Contoh: ilustrasi pengaturan nilai properti ke nilai default-nya.
<!DOCTYPE html>
<html>
<head>
<title>
Properti DOM Style Background
</title>
<style>
.DDM
{
height: 250px;
width: 250px;
border-style: solid;
background: green
}
</style>
</head>
<body>
<h1
style="color: green">
Blog Elfan
</h1>
<b>
Properti DOM Style Background
</b>
<p>
Klik tombol untuk mengatur
background ke initial.
</p>
<div
class="DDM">
</div>
<button
onclick="setBg()">
Set background
</button>
<script>
function setBg()
{
elem = document.querySelector('.DDM');
elem.style.background = "initial";
}
</script>
</body>
</html>
Contoh: digunakan untuk inherit properti dari property parent-nya.
<!DOCTYPE html>
<html>
<head>
<title>
Properti DOM Style Background
</title>
<style>
.MMO
{
margin: 20px;
height: 100px;
width: 100px;
border: 5px solid;}
#parent
{
height: 250px;
width: 250px;
border: 1px solid;
background:
url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg0fWTvYnJ4J4D_mj8vUbGpufPYHsq8Xsw2swXjSTyWIpM8K3UbEtnLBTytORLimGCcVDoHRuUrCyINBQFaCu30OBjFQwdo84zrF3aNZtbZSBa9JZk9ah7OTYVsDPard9U6oxAi6-y05Mg/s35/t%25252Bkotak%25252Bwhite.png') center / cover;}
</style>
</head>
<body>
<h1
style="color: green">
Blog Elfan
</h1>
<b>
Properti DOM Style Background
</b>
<p>
Klik tombol untuk mengatur
background ke inherit-nya.
</p>
<div
id="parent">
<div
class="MMO">
</div>
</div>
<button
onclick="setBg()">
Set background
</button>
<script>
function setBg()
{
elem = document.querySelector('.MMO');
elem.style.background = "inherit";
}
</script>
</body>
</html>
- 4 Value Properti backgroundRepeat Style DOM pada HTML [klik]
- 3 Value Properti backgroundClip Style DOM pada HTML [klik]
- 5 Value Properti backgroundOrigin Style DOM pada HTML [klik]
- 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]
5 komentar untuk "Mengatur Latar Belakang HTML Menggunakan Background 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 Style Background DOM pada HTML?
BalasHapusBerikut adalah beberapa jenis browser yang dapat digunakan untuk mengaktifkan Style Backround 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 style background DOM pada HTML?
BalasHapusProperti background style DOM pada HTML berfungsi untuk mengatur atau mengembalikan nilai hingga delapan properti background yang terpisah, dalam bentuk singkatan. Dengan properti ini, pengembang dapat mengatur atau mengembalikan satu atau lebih dari beberapa urutan berikut, yaitu: background-color, background-image, background-repeat, dan lain sebagainya.
HapusBerfungsi untuk mengembalikan style background pada HTML DOM dimana properti ini merupakan properti singkatan yang digunakan untuk mengatur atau mengembalikan nilai dari suatu elemen. Properti ini juga dapat digunakan untuk membantu memanipulasi satu atau lebih dari delapan properti background.
Hapus