7 Value Properti backgroundSize Style DOM pada HTML

Properti style backgroundSize DOM pada HTML digunakan untuk mengatur atau mengembalikan nilai ukuran dari image background.

Sintak:
  • digunakan untuk mendapatkan nilai dari properti backgroundSize: object.style.backgroundSize
  • digunakan untuk mengatur properti backgroundSize: object.style.backgroundSize = "auto|length|percentage|cover|contain|initial|inherit"

Return Values: berfungsi untuk mengembalikan nilai sebuah string yang merepresentasikan properti background-size dari suatu elemen.

Property Values:
  • auto: digunakan untuk menampilkan image background dalam ukuran aslinya, dan juga merupakan nilai default dari properti backgroundSize.
  • length: digunakan untuk mengatur ukuran panjang dan lebar dari image. Nilai tersebut mengatur ukuran lebar dan panjang secara berurutan. Jika hanya terdapat satu nilai saja yang diberikan, maka nilai lainnya secara otomatis akan diatur ke tipe 'auto'.
  • percentage: digunakan untuk mengatur ukuran panjang dan lebar dalam satuan ukuran persen dari elemen parent. Nilai tersebut mengatur ukuran lebar dan panjang secara berurutan. Jika hanya terdapat satu nilai saja yang diberikan, maka nilai lainnya secara otomatis akan diatur ke tipe 'auto'.
  • cover: digunakan untuk mengukur skala dari image background untuk menutupi keseluruhan elemen container.
  • contain: digunakan untuk mengukur skala image background sebesar dari kemungkinan ukuran panjang dan lebar yang bersesuaian dengan area container.
  • initial: digunakan untuk mengatur nilai properti ke nilai default-nya.
  • inherit: digunakan untuk menerima turunan nilai dari properti background size yang berasal dari elemen parent.

Contoh:

<!DOCTYPE html>

<html 

lang="en">

 

<head>

 

<title>

Properti Style backgroundSize 

DOM

</title>

 

<style>

.bg-img1 

{

height: 200px;

width: 200px;

border-style: solid;

background-image: url(

'https://4.bp.blogspot.com/-DVxqgRlQqnA/Yi9os9TXANI/AAAAAAAAOec/JE25o1CKDygtPFcDtHO1Gqn3rbGXtUtmQCK4BGAYYCw/s35/t%25252Bkotak%25252Bwhite.png');

background-repeat: no-repeat;

/* melakukan pengaturan ukuran 

ke demonstrasi auto. */

background-size: 100px;}

</style>

 

</head>

 

<body>

 

<h1 

style="color: green">

Blog Elfan

</h1>

 

<b>

Properti Style backgroundSize 

DOM

</b>

 

<p>

Klik tombol untuk mengubah 

ukuran dari image background.

</p>

 

<div 

class="bg-img1">

</div>

 

<button 

onclick="changePos1()">

Mengubah ukuran gambar

</button>

 

<script>

function changePos1() 

{

elem = document.querySelector('.bg-img1');

// Pengaturan ukuran ke tipe 

// auto

elem.style.backgroundSize = 'auto';

}

</script>

 

</body>

 

</html>

Output:

Blog Elfan

Properti Style backgroundSize DOM

Klik tombol untuk mengubah ukuran dari image background.



Contoh:

<!DOCTYPE html>

<html 

lang="en">

 

<head>

 

<title>

Properti Style backgroundSize 

DOM

</title>

 

<style>

.bg-img2 

{

height: 200px;

width: 200px;

border-style: solid;

background-image: url(

'https://4.bp.blogspot.com/-DVxqgRlQqnA/Yi9os9TXANI/AAAAAAAAOec/JE25o1CKDygtPFcDtHO1Gqn3rbGXtUtmQCK4BGAYYCw/s35/t%25252Bkotak%25252Bwhite.png');

background-repeat: no-repeat;}

</style>

 

</head>

 

<body>

 

<h1 

style="color: green">

Blog Elfan

</h1>

 

<b>

Properti Style backgroundSize 

DOM

</b>

 

<p>

Klik tombol untuk mengubah 

ukuran dari image background.

</p>

 

<div 

class="bg-img2">

</div>

 

<button 

onclick="changePos2()">

Change size of image

</button>

 

<script>

function changePos2() 

{

elem = document.querySelector('.bg-img2');

// Pengaturan ukuran lebar ke 

// 200px dan panjang ke 50px.

elem.style.backgroundSize =

'200px 50px';

}

</script>

 

</body>

 

</html>

Output:

Blog Elfan

Properti Style backgroundSize DOM

Klik tombol untuk mengubah ukuran dari image background.



Contoh:

<!DOCTYPE html>

<html 

lang="en">

 

<head>

 

<title>

Properti Style backgroundSize 

DOM

</title>

 

<style>

.bg-img3 

{

height: 200px;

width: 200px;

border-style: solid;

background-image: url(

'https://4.bp.blogspot.com/-DVxqgRlQqnA/Yi9os9TXANI/AAAAAAAAOec/JE25o1CKDygtPFcDtHO1Gqn3rbGXtUtmQCK4BGAYYCw/s35/t%25252Bkotak%25252Bwhite.png');

background-repeat: no-repeat;}

</style>

 

</head>

 

<body>

 

<h1 

style="color: green">

Blog Elfan

</h1>

 

<b>

Properti Style backgroundSize 

DOM

</b>

 

<p>

Klik tombol untuk mengubah 

ukuran dari image background.

</p>

 

<div 

class="bg-img3">

</div>

 

<button 

onclick="changePos3()">

Change size of image

</button>

 

<script>

function changePos3() 

{

elem = document.querySelector('.bg-img3');

// Pengaturan ukuran lebar ke 

// 25% dan panjang ke 50%.

elem.style.backgroundSize = '25% 50%';

}

</script>

 

</body>

 

</html>

Output:

Blog Elfan

Properti Style backgroundSize DOM

Klik tombol untuk mengubah ukuran dari image background.



Contoh:

<!DOCTYPE html>

<html 

lang="en">

 

<head>

 

<title>

Properti Style backgroundSize 

DOM

</title>

 

<style>

.bg-img4 

{

height: 200px;

width: 200px;

border-style: solid;

background-image: url(

'https://4.bp.blogspot.com/-DVxqgRlQqnA/Yi9os9TXANI/AAAAAAAAOec/JE25o1CKDygtPFcDtHO1Gqn3rbGXtUtmQCK4BGAYYCw/s35/t%25252Bkotak%25252Bwhite.png');

background-repeat: no-repeat;}

</style>

 

</head>

 

<body>

 

<h1 

style="color: green">

Blog Elfan

</h1>

 

<b>

Properti Style backgroundSize 

DOM

</b>

 

<p>

Klik tombol untuk mengubah 

ukuran dari image background.

</p>

 

<div 

class="bg-img4">

</div>

 

<button 

onclick="changePos4()">

Change size of image

</button>

 

<script>

function changePos4() 

{

elem = document.querySelector('.bg-img4');

// Pengaturan ukuran cover

elem.style.backgroundSize = 'cover';

}

</script>

 

</body>

 

</html>

Output:

Blog Elfan

Properti Style backgroundSize DOM

Klik tombol untuk mengubah ukuran dari image background.



Contoh:

<!DOCTYPE html>

<html 

lang="en">

 

<head>

<title>

Properti Style backgroundSize 

DOM

</title>

 

<style>

.bg-img5 {

height: 200px;

width: 200px;

border-style: solid;

background-image: url(

'https://4.bp.blogspot.com/-DVxqgRlQqnA/Yi9os9TXANI/AAAAAAAAOec/JE25o1CKDygtPFcDtHO1Gqn3rbGXtUtmQCK4BGAYYCw/s35/t%25252Bkotak%25252Bwhite.png');

background-repeat: no-repeat;

}

</style>

 

</head>

 

<body>

 

<h1 

style="color: green">

Blog Elfan

</h1>

 

<b>

Properti Style backgroundSize 

DOM

</b>

 

<p>

Klik tombol untuk mengubah 

ukuran dari image background

</p>

 

<div 

class="bg-img5">

</div>

 

<button 

onclick="changePos5()">

Change size of image

</button>

 

<script>

function changePos5() 

{

elem = document.querySelector('.bg-img5');

// Pengaturan ukuran untuk 

// contain

elem.style.backgroundSize = 'contain';

}

</script>

 

</body>

 

</html>

Output:

Blog Elfan

Properti Style backgroundSize DOM

Klik tombol untuk mengubah ukuran dari image background



Contoh:

<!DOCTYPE html>

<html 

lang="en">

 

<head>

 

<title>

Properti Style backgroundSize 

DOM

</title>

 

<style>

.bg-img6 

{

height: 200px;

width: 200px;

border-style: solid;

background-image: url(

'https://4.bp.blogspot.com/-DVxqgRlQqnA/Yi9os9TXANI/AAAAAAAAOec/JE25o1CKDygtPFcDtHO1Gqn3rbGXtUtmQCK4BGAYYCw/s35/t%25252Bkotak%25252Bwhite.png');

background-repeat: no-repeat;

/* Pengaturan ukuran untuk 

demonstrasi initial */

background-size: 100px;}

</style>

 

</head>

 

<body>

 

<h1 

style="color: green">

Blog Elfan

</h1>

 

<b>

Properti Style backgroundSize 

DOM

</b>

 

<p>

Klik tombol untuk mengubah 

ukuran dari image background.

</p>

 

<div 

class="bg-img6">

</div>

 

<button 

onclick="changePos6()">

Change size of image

</button>

 

<script>

function changePos6() 

{

elem = document.querySelector('.bg-img6');

// Pengaturan ukuran ke 

// initial

elem.style.backgroundSize = 'initial';

}

</script>

 

</body>

 

</html>

Output:

Blog Elfan

Properti Style backgroundSize DOM

Klik tombol untuk mengubah ukuran dari image background.



Contoh:

<!DOCTYPE html>

<html 

lang="en">

 

<head>

 

<title>

Properti Style backgroundSize 

DOM

</title>

 

<style>

.bg-img7 

{

height: 200px;

width: 200px;

border-style: solid;

background-image: url(

'https://4.bp.blogspot.com/-DVxqgRlQqnA/Yi9os9TXANI/AAAAAAAAOec/JE25o1CKDygtPFcDtHO1Gqn3rbGXtUtmQCK4BGAYYCw/s35/t%25252Bkotak%25252Bwhite.png');

background-repeat: no-repeat;}

 

#parent 

{

background-size: 100px 200px;}

</style>

 

</head>

 

<body>

 

<h1 

style="color: green">

Blog Elfan

</h1>

 

<b>

Properti Style backgroundSize 

DOM

</b>

 

<p>

Klik tombol untuk mengubah 

ukuran dari image background.

</p>

 

<div 

id="parent">

 

<div 

class="bg-img7">

</div>

 

</div>

 

<button 

onclick="changePos7()">

Change size of image

</button>

 

<script>

function changePos7() 

{

elem = document.querySelector('.bg-img7');

// Pengaturan ukuran ke

// inherit

elem.style.backgroundSize = 'inherit';

}

</script>

 

</body>

 

</html>

Output:

Blog Elfan

Properti Style backgroundSize DOM

Klik tombol untuk mengubah ukuran dari image background.

Komentar

  1. Jenis browser apa saja yang dapat digunakan untuk mengaktifkan properti backgroundSize Style DOM pada HTML?

    BalasHapus
    Balasan
    1. Berikut adalah beberapa jenis browser yang dapat digunakan untuk mengaktifkan properti backgroundSize Style DOM pada HTML:
      1. Chrome 4.0
      2. Internet Explorer 9.0
      3. Firefox 4.0
      4. Safari 4.1
      5. Opera 10.5

      Hapus
  2. Apa yang dimaksud dengan properti backgroundSize Style DOM pada HTML?

    BalasHapus
    Balasan
    1. Properti backgroundSize Style DOM pada HTML digunakan untuk mengatur atau mengembalikan nilai ukuran gambar latar belakang pada dokumen HTML.

      Hapus
    2. Properti backgroundSize atau properti latar belakang DOM pada HTML digunakan untuk mengatur atau mendapatkan nilai ukuran dari background pada dokumen html.

      Hapus

Posting Komentar

*Respon komentar 7 x 24 jam, mohon bersabar jika komentar tidak langsung dipublikasi atau mendapatkan balasan secara langsung. :D

*Jika terdapat typo, link bermasalah, dan lain sebagainya, pengunjung dapat melaporkan permasalahan tersebut melalui WA: +62-896-2514-6106




~ Ikatlah Ilmu dengan Memostingkannya ~

Referensi Tambahan:

Enkapsulasi pada Java

2 Jenis Utama Kegiatan Penelitian Berdasarkan Waktunya, Crosssectional Salah Satunya

6 Contoh Program Method Overloading pada Java

3 Jenis Utama Looping pada Java

Perbedaan stdio.h dan stdlib.h pada Bahasa C