Mengatur Gambar Latar Belakang HTML backgroundAttachment DOM
 |
| Ilustrasi backgroundAttachment HTML |
- berfungsi untuk mengembalikan nilai properti backgroundAttachment: object.style.backgroundAttachment
- berfungsi untuk mengatur properti backgroundAttachment: object.style.backgroundAttachment = "scroll|fixed|local|initial|inherit"
Return Values: berfungsi untuk mengembalikan sebuah nilai string yang merepresentasikan bagaimana image dilampirkan ke object yang terdapat pada suatu dokumen.
Property Values: berisi deskripsi dari setiap nilai properti yang disertai dengan contoh.
- scroll: nilai ini membuat image background dapat melakukan scroll dengan elemen, yang merupakan nilai default.
- fixed: nilai ini membuat image background menjadi fix terhadap viewport.
- local: nilai ini membuat image background dapat melakukan scroll dengan konten elemen.
- initial: digunakan untuk mengatur properti ke nilai default-nya.
- inherit: menerima nilai turunan properti dari elemen parent-nya.
Contoh: penggunaan nilai scroll.
<!DOCTYPE html>
<html>
<head>
<title>
Properti Style
backgroundAttachment DOM
</title>
<style>
body
{
background: url(
'https://4.bp.blogspot.com/-DVxqgRlQqnA/Yi9os9TXANI/AAAAAAAAOec/JE25o1CKDygtPFcDtHO1Gqn3rbGXtUtmQCK4BGAYYCw/s35/t%25252Bkotak%25252Bwhite.png')
no-repeat right top / 200px;
background-attachment: fixed;}
#scrolling-area
{
height: 1000px;}
</style>
</head>
<body>
<h1
style="color: green; margin-top: 100px;">
Blog Elfan
</h1>
<b>
Properti Style
backgroundAttachment DOM
</b>
<p>
Klik tombol untuk mengubah
attachment dari image
background ke tipe 'scroll'.
</p>
<button
onclick="changeAttachment()">
Change attachment
</button>
<div
id="scrolling-area">
<br>
Merupakan area besar untuk
melakukan scroll.
</div>
<!-- Script untuk mengubah
backgroundAttachment -->
<script>
function changeAttachment()
{
document.body.style.backgroundAttachment
= 'scroll';
}
</script>
</body>
</html>
Contoh: penggunaan nilai fixed.
<!DOCTYPE html>
<html>
<head>
<title>
Properti Style
backgroundAttachment DOM
</title>
<style>
body
{
background: url(
'https://4.bp.blogspot.com/-DVxqgRlQqnA/Yi9os9TXANI/AAAAAAAAOec/JE25o1CKDygtPFcDtHO1Gqn3rbGXtUtmQCK4BGAYYCw/s35/t%25252Bkotak%25252Bwhite.png')
no-repeat right top / 200px;}
#scrolling-area
{
height: 1000px;}
</style>
</head>
<body>
<h1
style="color: green; margin-top: 100px;">
Blog Elfan
</h1>
<b>
Properti DOM Style
backgroundAttachment
</b>
<p>
Klik tombol untuk mengubah
attachment dari image
background ke tipe 'scroll'.
</p>
<button
onclick="changeAttachment()">
Change attachment
</button>
<div
id="scrolling-area">
<br>
Merupakan area besar untuk
melakukan scrolling.
</div>
<!-- Script untuk mengubah
backgroundAttachment -->
<script>
function changeAttachment()
{
document.body.style.backgroundAttachment
= 'fixed';
}
</script>
</body>
</html>
Contoh: penggunaan nilai local.
<!DOCTYPE html>
<html>
<head>
<title>
Properti Style
backgroundAttachment DOM
</title>
<style>
body
{
background: url(
'https://4.bp.blogspot.com/-DVxqgRlQqnA/Yi9os9TXANI/AAAAAAAAOec/JE25o1CKDygtPFcDtHO1Gqn3rbGXtUtmQCK4BGAYYCw/s35/t%25252Bkotak%25252Bwhite.png')
no-repeat right top / 200px;
background-attachment: fixed;}
#scrolling-area
{
height: 1000px;}
</style>
</head>
<body>
<h1
style="color: green; margin-top: 100px;">
Blog Elfan
</h1>
<b>
Properti Style
backgroundAttachment DOM
</b>
<p>
Klik tombol untuk mengubah
attachment dari image
background ke tipe 'scroll'.
</p>
<button
onclick="changeAttachment()">
Change attachment
</button>
<div
id="scrolling-area">
<br>
Merupakan area besar untuk
melakukan scroll.
</div>
<!-- Script untuk mengubah
backgroundAttachment -->
<script>
function changeAttachment()
{
document.body.style.backgroundAttachment
= 'local';
}
</script>
</body>
</html>
Contoh: penggunaan nilai initial.
<!DOCTYPE html>
<html>
<head>
<title>
Properti Style
backgroundAttachment DOM
</title>
<style>
body
{
background: url(
'https://4.bp.blogspot.com/-DVxqgRlQqnA/Yi9os9TXANI/AAAAAAAAOec/JE25o1CKDygtPFcDtHO1Gqn3rbGXtUtmQCK4BGAYYCw/s35/t%25252Bkotak%25252Bwhite.png')
no-repeat right top / 200px;
background-attachment: fixed;}
#scrolling-area
{
height: 1000px;}
</style>
</head>
<body>
<h1
style="color: green; margin-top: 100px;">
Blog Elfan
</h1>
<b>
Properti Style
backgroundAttachment DOM
</b>
<p>
Klik tombol untk mengubah
attachment dari image
background ke tipe 'scroll'.
</p>
<button
onclick="changeAttachment()">
Change attachment
</button>
<div
id="scrolling-area">
<br>
Merupakan area besar untuk
scroll.
</div>
<!-- Script untuk mengubah
backgroundAttachment -->
<script>
function changeAttachment()
{
document.body.style.backgroundAttachment
= 'initial';
}
</script>
</body>
</html>
Contoh: penggunaan nilai inherit.
<!DOCTYPE html>
<html>
<head>
<title>
Properti Style
backgroundAttachment DOM
</title>
<style>
.bg-img
{
height: 150px;
background: url(
'https://4.bp.blogspot.com/-DVxqgRlQqnA/Yi9os9TXANI/AAAAAAAAOec/JE25o1CKDygtPFcDtHO1Gqn3rbGXtUtmQCK4BGAYYCw/s35/t%25252Bkotak%25252Bwhite.png')
no-repeat right top / 200px;}
#parent
{
background-attachment: fixed;
height: 1000px;}
</style>
</head>
<body>
<div
id="parent">
<div
class="bg-img">
</div>
<h1
style="color: green;">
Blog Elfan
</h1>
<b>
Properti Style
backgroundAttachment DOM
</b>
<p>
Klik tombol untuk mengubah
attachment dari image
background ke tipe 'inherit'.
</p>
<button
onclick="changeAttachment()">
Change attachment
</button>
</div>
<!-- Script untuk mengubah
properti backgroundAttachment.
-->
<script>
function changeAttachment()
{
elem = document.querySelector('.bg-img');
elem.style.backgroundAttachment = 'inherit';
}
</script>
</body>
</html>
- 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]
- 4 Value Properti borderBottomColor Style DOM pada HTML [klik]
Jenis browser apa saja yang dapat digunakan untuk mengaktifkan properti backgroundAttachment Style DOM pada HTML?
BalasHapusBerikut adalah beberapa jenis browser yang dapat digunakan untuk mengaktifkan properti backgroundAttachment 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 fungsi properti backgroundAttachment Style DOM pada HTML?
BalasHapusproperti backgroundAttachment Style DOM pada HTMl digunakan untuk mengatur atau mengembalikan nilai dari gambar latar belakang apakah dapat dilakukan gulir dengan konten, atau bersifat tetap.
HapusProperti backgroundAttachment digunakan untuk mengatur atau mendapatkan background dari latar belakang, apakah harus digulir atau tidak.
Hapus