Mengatur Latar Belakang HTML backgroundPosition Style DOM
 |
| Ilustrasi backgroundPosition HTML |
- digunakan untk mendapatkan properti backgroundPosition: object.style.backgroundPosition
- digunakan untuk mengatur properti backgroundPosition: object.style.backgroundPosition = value
Return Values: berfungsi untuk mengembalikan sebuah nilai string yang merepresentasikan posisi dari background-image.
Property Values:
- keyword values: digunakan untuk menentukan posisi menggunakan keyword. Jika hanya terdapat satu nilai saja yang ditentukan, maka nilai lainnya akan menjadi 'center' secara default. beberapa kemungkinan dari kombinasi keyword adalah: top left | top center | top right | center left | center center | center right | bottom left | bottom center | bottom right.
- x% y%: digunakan untuk menentukan posisi menggunakan nilai persen. Nilai x% berfungsi untuk menentukan posisi horizontal, dan nilai y% berfungsi untuk menentukan posisi vertikal terhadap posisi initial top-left.
- xpos ypos: digunakan untuk menentukan posisi menggunakan satuan pixel atau nilai pengukuran CSS lainnya. Nilai xpos berfungsi untuk menentukan posisi horizontal, dan ypos berfungsi untuk menentukan posisi vertikal terhadap posisi initial top-left.
- initial: digunakan untuk mengatur nilai properti backgroundPosition ke nilai default-nya.
- inherit: digunakan untuk menerima nilai properti dari properti parent.
Nilai atau value dari properti backgroundPosition dapat dijelaskan menggunakan bebera contoh sebagai berikut.
Contoh: penggunaan value keyword, dengan menggunakan nilai 'bottom right' sebagai ilustrasi.
<!DOCTYPE html>
<html
lang="en">
<head>
<title>
Properti Style
backgroundPosition DOM
</title>
<style>
.bg-img1
{
height: 300px;
width: 300px;
border-style: solid;
background:
url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg0fWTvYnJ4J4D_mj8vUbGpufPYHsq8Xsw2swXjSTyWIpM8K3UbEtnLBTytORLimGCcVDoHRuUrCyINBQFaCu30OBjFQwdo84zrF3aNZtbZSBa9JZk9ah7OTYVsDPard9U6oxAi6-y05Mg/s35/t%25252Bkotak%25252Bwhite.png')
no-repeat center;}
</style>
</head>
<body>
<h1
style="color: green">
Blog Elfan
</h1>
<b>
DOM Style backgroundPosition
Property
</b>
<p>
Klik tombol untuk mengubah
posisi image background.
</p>
<div
class="bg-img1">
</div>
<button
onclick="changePos1()">
Change position of background
image
</button>
<script>
function
changePos1()
{
elem = document.querySelector('.bg-img1');
// Pengaturan posisi ke bawah
// vertikal dan kanan
// horizontal.
elem.style.backgroundPosition = 'bottom right';
}
</script>
</body>
</html>
Output:Blog Elfan
DOM Style backgroundPosition PropertyKlik tombol untuk mengubah posisi image background.
Contoh: penggunaan nilai persentasi untuk menentukan posisi, dengan menggunakan posisi '25% 75%' terhadap gambar.
<!DOCTYPE html>
<html
lang="en">
<head>
<meta
charset="UTF-8">
<title>
Properti Style
backgroundPosition DOM
</title>
<style>
.bg-img2
{
height: 300px;
width: 300px;
border-style: solid;
background:
url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg0fWTvYnJ4J4D_mj8vUbGpufPYHsq8Xsw2swXjSTyWIpM8K3UbEtnLBTytORLimGCcVDoHRuUrCyINBQFaCu30OBjFQwdo84zrF3aNZtbZSBa9JZk9ah7OTYVsDPard9U6oxAi6-y05Mg/s35/t%25252Bkotak%25252Bwhite.png')
no-repeat center;}
</style>
</head>
<body>
<h1
style="color: green">
Blog Elfan
</h1>
<b>
Properti Style
backgroundPosition DOM
</b>
<p>
Klik tombol untuk mengubah
posisi dari image background.
</p>
<div
class="bg-img2">
</div>
<button
onclick="changePos2()">
Change position of background
image
</button>
<script>
function changePos2()
{
elem = document.querySelector('.bg-img2');
// Pengaturan posisi ke nilai
// horizontal 25% dan nilai
// vertikal 75%.
elem.style.backgroundPosition = '25% 75%';
}
</script>
</body>
</html>
Output:Blog Elfan
Properti Style backgroundPosition DOMKlik tombol untuk mengubah posisi dari image background.
<!DOCTYPE html>
<html
lang="en">
<head>
<title>
Properti Style
backgroundPosition DOM
</title>
<style>
.bg-img3
{
height: 300px;
width: 300px;
border-style: solid;
background:
url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg0fWTvYnJ4J4D_mj8vUbGpufPYHsq8Xsw2swXjSTyWIpM8K3UbEtnLBTytORLimGCcVDoHRuUrCyINBQFaCu30OBjFQwdo84zrF3aNZtbZSBa9JZk9ah7OTYVsDPard9U6oxAi6-y05Mg/s35/t%25252Bkotak%25252Bwhite.png')
no-repeat center;}
</style>
</head>
<body>
<h1
style="color: green">
Blog Elfan
</h1>
<b>
Properti DOM Style
backgroundPosition
</b>
<p>
Klik tombol untuk mengubah
posisi dari image background.
</p>
<div
class="bg-img3">
</div>
<button
onclick="changePos3()">
Change position of background
image
</button>
<script>
function changePos3()
{
elem = document.querySelector('.bg-img3');
// Pengaturan posisi
// horizontal ke nilai 50px
// dan vertikal 25px.
elem.style.backgroundPosition = '50px 25px';
}
</script>
</body>
</html>
Output:Blog Elfan
Properti DOM Style backgroundPositionKlik tombol untuk mengubah posisi dari image background.
Contoh: penggunaan nilai initial, dengan pengaturan posisi ke nilai default.
<!DOCTYPE html>
<html
lang="en">
<head>
<title>
Properti Style
backgroundPosition DOM
</title>
<style>
.bg-img4
{
height: 300px;
width: 300px;
border-style: solid;
background:
url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg0fWTvYnJ4J4D_mj8vUbGpufPYHsq8Xsw2swXjSTyWIpM8K3UbEtnLBTytORLimGCcVDoHRuUrCyINBQFaCu30OBjFQwdo84zrF3aNZtbZSBa9JZk9ah7OTYVsDPard9U6oxAi6-y05Mg/s35/t%25252Bkotak%25252Bwhite.png')
no-repeat center;}
</style>
</head>
<body>
<h1
style="color: green">
Blog Elfan
</h1>
<b>
Properti Style
backgroundPosition DOM
</b>
<p>
Klik tombol untuk mengubah
posisi dari image background.
</p>
<div
class="bg-img4">
</div>
<button
onclick="changePos4()">
Change position of background
image
</button>
<script>
function changePos4()
{
elem = document.querySelector('.bg-img4');
// Pengaturan posisi ke nilai
// default dengan menggunakan
// initial.
elem.style.backgroundPosition = 'initial';
}
</script>
</body>
</html>
Output:Blog Elfan
Properti Style backgroundPosition DOMKlik tombol untuk mengubah posisi dari image background.
Contoh: penggunaan nilai inherit, yang menerima nilai turunan dari elemen parent.
<!DOCTYPE html>
<html
lang="en">
<head>
<title>
Property Style
backgroundPosition DOM
</title>
<style>
/* Parent element */
#parent
{
height: 300px;
width: 300px;
border-style: solid;
/* Pengaturan parent dari
background-position ke center
left. */
background-position: center left;}
.bg-img5 {
height: 300px;
width: 300px;
background:
url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg0fWTvYnJ4J4D_mj8vUbGpufPYHsq8Xsw2swXjSTyWIpM8K3UbEtnLBTytORLimGCcVDoHRuUrCyINBQFaCu30OBjFQwdo84zrF3aNZtbZSBa9JZk9ah7OTYVsDPard9U6oxAi6-y05Mg/s35/t%25252Bkotak%25252Bwhite.png')
no-repeat center;}
</style>
</head>
<body>
<h1
style="color: green">
Blog Elfan
</h1>
<b>
Properti Style
backgroundPosition DOM
</b>
<p>
Klik tombol untuk mengubah
posisi image background.
</p>
<div
id="parent">
<div class="bg-img5"></div>
</div>
<button onclick="changePos5()">
Change position of background
image
</button>
<script>
function changePos5()
{
elem = document.querySelector('.bg-img5');
// Pengaturan posisi ke
// inherit dari nilai parent.
elem.style.backgroundPosition = 'inherit';
}
</script>
</body>
</html>
Output:Blog Elfan
Properti Style backgroundPosition DOMKlik tombol untuk mengubah posisi image background.
- 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]
- 12 Value Properti borderBottomStyle DOM pada HTML [klik]
5 komentar untuk "Mengatur Latar Belakang HTML backgroundPosition 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 backgroundPosition Style DOM pada HTML?
BalasHapusBerikut adalah beberapa jenis browser yang dapat digunakan untuk mengaktifkan properti backgroundPosition 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 dari properti backgroundPosition Style DOM pada HTML?
BalasHapusProperti backgroundPostion Style DOM pada HTML digunakan untuk menetapkan atau mengembalikan nilai dari posisi gambar latar belakang dalam sebuah elemen pada dokumen HTML.
HapusProperti backgroundPosition Style DOM pada HTML digunakan untuk menetapkan atau mendapatkan posisi gambar latar belakang dari suatu elemen.
Hapus