Lompat ke konten Lompat ke sidebar Lompat ke footer
Beranda / html

Mengatur Ukuran Latar Belakang HTML backgroundSize Style DOM

Dipublikasikan Oleh: elfanmauludi 5 komentar
Properti style backgroundSize DOM pada HTML digunakan untuk mengatur atau mengembalikan nilai ukuran dari image background.


Sebelum memahami lebih dalam materi tentang Mengatur Ukuran Latar Belakang HTML backgroundSize Style DOM, terlebih dahulu pelajari materi tentang: Mengatur Latar Belakang HTML Menggunakan backgroundOrigin Style DOM, Mengatur Klip Latar Belakang HTML backgroundClip Style DOM, dan Mengatur Perulangan Latar Belakang HTML backgroundRepeat Style DOM.

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.

Baca Juga:

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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg0fWTvYnJ4J4D_mj8vUbGpufPYHsq8Xsw2swXjSTyWIpM8K3UbEtnLBTytORLimGCcVDoHRuUrCyINBQFaCu30OBjFQwdo84zrF3aNZtbZSBa9JZk9ah7OTYVsDPard9U6oxAi6-y05Mg/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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg0fWTvYnJ4J4D_mj8vUbGpufPYHsq8Xsw2swXjSTyWIpM8K3UbEtnLBTytORLimGCcVDoHRuUrCyINBQFaCu30OBjFQwdo84zrF3aNZtbZSBa9JZk9ah7OTYVsDPard9U6oxAi6-y05Mg/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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg0fWTvYnJ4J4D_mj8vUbGpufPYHsq8Xsw2swXjSTyWIpM8K3UbEtnLBTytORLimGCcVDoHRuUrCyINBQFaCu30OBjFQwdo84zrF3aNZtbZSBa9JZk9ah7OTYVsDPard9U6oxAi6-y05Mg/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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg0fWTvYnJ4J4D_mj8vUbGpufPYHsq8Xsw2swXjSTyWIpM8K3UbEtnLBTytORLimGCcVDoHRuUrCyINBQFaCu30OBjFQwdo84zrF3aNZtbZSBa9JZk9ah7OTYVsDPard9U6oxAi6-y05Mg/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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg0fWTvYnJ4J4D_mj8vUbGpufPYHsq8Xsw2swXjSTyWIpM8K3UbEtnLBTytORLimGCcVDoHRuUrCyINBQFaCu30OBjFQwdo84zrF3aNZtbZSBa9JZk9ah7OTYVsDPard9U6oxAi6-y05Mg/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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg0fWTvYnJ4J4D_mj8vUbGpufPYHsq8Xsw2swXjSTyWIpM8K3UbEtnLBTytORLimGCcVDoHRuUrCyINBQFaCu30OBjFQwdo84zrF3aNZtbZSBa9JZk9ah7OTYVsDPard9U6oxAi6-y05Mg/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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg0fWTvYnJ4J4D_mj8vUbGpufPYHsq8Xsw2swXjSTyWIpM8K3UbEtnLBTytORLimGCcVDoHRuUrCyINBQFaCu30OBjFQwdo84zrF3aNZtbZSBa9JZk9ah7OTYVsDPard9U6oxAi6-y05Mg/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.


Artikel ini didedikasikan kepada: Eva Widianingrum, Evina Diva Prasiwi, Fahrizal Febrilliantza Abdullah, Fauzan Fakturohman, dan Febri Ajianto.
Location: Semarang, Kota Semarang, Jawa Tengah, Indonesia

5 komentar untuk "Mengatur Ukuran Latar Belakang HTML backgroundSize Style DOM"

  1. AnonimMinggu, 17 April 2022 pukul 20.25.00 WIB

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

    BalasHapus
    Balasan
    1. AnonimMinggu, 17 April 2022 pukul 20.26.00 WIB

      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. AnonimSelasa, 19 April 2022 pukul 10.06.00 WIB

    Apa yang dimaksud dengan properti backgroundSize Style DOM pada HTML?

    BalasHapus
    Balasan
    1. AnonimSelasa, 19 April 2022 pukul 10.06.00 WIB

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

      Hapus
    2. AnonimSelasa, 19 April 2022 pukul 10.08.00 WIB

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

      Hapus

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 -