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

Mengatur Latar Belakang HTML Menggunakan Background Style DOM

Dipublikasikan Oleh: elfanmauludi 5 komentar
Properti Style background DOM pada HTML merupakan properti singkat yang digunakan untuk mengatur atau mengembalikan nilai background dari suatu elemen. Properti ini dapat digunakan untuk membantu memanipulasi satu atau lebih dari nilai properti background.


Sebelum memahami lebih dalam materi tentang Mengatur Latar Belakang HTML Menggunakan Background Style DOM, terlebih dahulu pelajari materi tentang: Memeriksa Status Animasi HTML Menggunakan animationPlayState Style DOM, Mengatur Waktu Transisi HTML animationTimingFunction Style DOM, dan Mengatur Nama Animasi HTML Menggunakan animationName Style DOM.

Sintak:
  • 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>



Mengatur latar belakang HTML menggunakan properti latar belakang dalam gaya dokumen objek model merupakan aspek penting dalam desain halaman web. Latar belakang berfungsi tidak hanya sebagai elemen dekoratif, tetapi juga dapat mempengaruhi keseluruhan estetika dan pengalaman pengguna pada sebuah halaman. Dalam pengaturan tampilan sebuah halaman, latar belakang memiliki peran yang sangat vital untuk menciptakan suasana yang sesuai dengan tujuan atau tema dari halaman tersebut. Oleh karena itu, sangat penting untuk memahami cara kerja properti ini dan bagaimana menggunakannya untuk mencapai hasil yang diinginkan.

Proses pengaturan latar belakang ini dapat mencakup berbagai aspek, mulai dari pemilihan warna latar belakang, gambar sebagai latar belakang, hingga pengaturan pengulangan gambar latar belakang dan posisi penempatannya. Setiap elemen tersebut dapat disesuaikan untuk menciptakan tampilan halaman yang sesuai dengan kebutuhan atau preferensi yang diinginkan. Properti ini adalah salah satu yang paling sering digunakan dalam pengembangan desain halaman web dan memberikan fleksibilitas tinggi dalam menentukan bagaimana latar belakang sebuah halaman atau elemen di dalamnya akan terlihat.

Latar belakang halaman web dapat diatur dengan memilih warna yang sederhana hingga yang lebih kompleks, dengan menyesuaikan nilai-nilai tertentu pada gaya dokumen objek model. Misalnya, latar belakang dapat diberi warna tunggal atau bahkan gradasi warna yang memberikan efek visual yang menarik. Pengaturan ini membantu menciptakan tampilan yang tidak hanya fungsional, tetapi juga estetis. Pemilihan warna latar belakang yang tepat akan memberikan dampak besar terhadap keseluruhan desain, sehingga sangat penting untuk mempertimbangkan kontras antara warna latar belakang dengan teks atau elemen lain di halaman.

Selain warna, gambar juga sering digunakan sebagai latar belakang dalam desain halaman web. Penggunaan gambar memberikan kesan yang lebih dinamis dan bisa memberikan konteks lebih bagi pengguna halaman tersebut. Dalam pengaturannya, terdapat berbagai pilihan yang dapat disesuaikan, seperti pengulangan gambar atau pengaturan posisi gambar tersebut. Gambar latar belakang dapat diatur untuk mengulang secara vertikal, horizontal, atau bahkan diatur untuk tidak mengulang sama sekali, tergantung pada desain yang diinginkan. Pengaturan posisi gambar ini juga memungkinkan penempatan gambar di bagian tengah, kiri, kanan, atau bahkan di bagian bawah halaman atau elemen tertentu.

Ketika menggunakan gambar sebagai latar belakang, penting untuk memperhatikan ukuran gambar tersebut. Gambar yang terlalu besar dapat memperlambat waktu muat halaman, sementara gambar yang terlalu kecil dapat membuat latar belakang terlihat pecah-pecah atau tidak sesuai dengan desain yang diinginkan. Oleh karena itu, pemilihan gambar dengan ukuran yang tepat sangat penting dalam menciptakan pengalaman pengguna yang optimal.

Pengaturan posisi gambar latar belakang sangat penting untuk memastikan bahwa gambar terlihat dengan cara yang sesuai dengan desain keseluruhan. Hal ini sangat berguna ketika gambar yang digunakan tidak mengisi seluruh area latar belakang dan hanya digunakan sebagai elemen dekoratif. Gambar latar belakang dapat ditempatkan di posisi tertentu, baik itu di tengah, di sebelah kiri, atau di sebelah kanan elemen yang diberi latar belakang. Pengaturan ini memungkinkan kontrol penuh atas bagaimana gambar latar belakang ditampilkan pada halaman.

Selain itu, ada juga pilihan untuk mengatur sifat tetap atau bergeraknya gambar latar belakang. Properti ini memungkinkan gambar untuk tetap berada di tempat saat pengguna menggulir halaman atau bergerak seiring dengan guliran halaman. Pengaturan ini sangat berguna untuk menciptakan efek visual yang dinamis atau memberikan kesan bahwa elemen lain di halaman lebih aktif daripada gambar latar belakang tersebut. Efek ini sering digunakan pada desain halaman modern untuk menciptakan pengalaman yang lebih interaktif bagi pengguna.

Ada pula pengaturan tambahan yang berkaitan dengan properti latar belakang, seperti pengaturan ukuran gambar latar belakang. Dengan pengaturan ini, gambar dapat disesuaikan agar sesuai dengan ukuran area latar belakang, baik itu diperbesar, diperkecil, atau dipotong. Pengaturan ini memberikan kebebasan dalam mendesain halaman sehingga gambar latar belakang dapat disesuaikan dengan tampilan yang diinginkan tanpa mengorbankan kualitas visual.

Penggunaan latar belakang dalam desain web bukan hanya sebatas pada warna atau gambar, tetapi juga dapat melibatkan penggunaan kombinasi keduanya. Pengaturan lapisan latar belakang yang melibatkan beberapa elemen seperti warna, gambar, atau bahkan transparansi memberikan fleksibilitas yang lebih besar dalam menciptakan desain yang lebih kaya dan menarik. Misalnya, sebuah warna latar belakang dapat ditambahkan di bawah gambar latar belakang untuk memberikan kontras lebih kuat atau efek visual yang lebih dramatis. Dengan cara ini, pengaturan latar belakang memberikan lebih banyak peluang untuk berkreasi dalam desain halaman web.

Penting untuk memahami bagaimana pengaturan latar belakang ini bekerja dalam berbagai ukuran layar dan perangkat. Dengan semakin banyaknya perangkat yang digunakan untuk mengakses halaman web, mulai dari komputer desktop hingga perangkat bergerak seperti ponsel, responsifitas desain menjadi hal yang tidak bisa diabaikan. Properti latar belakang dalam gaya dokumen objek model memungkinkan halaman web untuk menyesuaikan tampilannya secara otomatis sesuai dengan ukuran layar perangkat yang digunakan. Hal ini memastikan bahwa latar belakang tetap terlihat dengan cara yang sesuai, baik itu dengan memuat gambar latar belakang dalam ukuran yang lebih kecil pada perangkat dengan layar kecil atau menampilkan gambar dalam resolusi tinggi pada layar yang lebih besar.

Pengaturan latar belakang juga memungkinkan penggunaan transparansi, yang memberikan efek visual tambahan pada desain. Transparansi ini dapat digunakan untuk membuat elemen latar belakang terlihat lebih halus atau untuk menciptakan kedalaman dalam desain dengan menambahkan lapisan transparan di atas latar belakang utama. Efek transparansi ini sering kali digunakan pada desain modern untuk menciptakan kesan visual yang elegan dan bersih.

Dalam pengaturan latar belakang, konsistensi sangat penting untuk menjaga desain tetap harmonis dan mudah dinavigasi. Latar belakang yang terlalu ramai atau mencolok dapat mengalihkan perhatian dari konten utama halaman. Oleh karena itu, sangat disarankan untuk memilih latar belakang yang mendukung dan memperkuat pesan yang ingin disampaikan melalui desain halaman web. Dengan pemilihan yang tepat, latar belakang dapat memperkaya pengalaman pengguna tanpa mengganggu kenyamanan dalam menjelajah halaman.

Secara keseluruhan, properti latar belakang dalam gaya dokumen objek model adalah alat yang sangat penting dalam desain halaman web. Dengan berbagai pilihan yang ditawarkan, pengaturan latar belakang dapat menciptakan suasana yang sesuai dengan tujuan atau tema halaman. Baik itu menggunakan warna, gambar, atau kombinasi keduanya, pengaturan ini memberikan fleksibilitas yang luar biasa untuk menciptakan desain yang menarik dan responsif. Penggunaan latar belakang yang bijak dapat memperkuat pengalaman pengguna dan meningkatkan kualitas visual halaman secara keseluruhan.

Artikel ini akan dibaca oleh: Diyah Ayu Fatmawati, Dwi Anggraini, Ega Ayu Tri Paningsih, Eka Rositasari, dan Elisa Fitri Rahmawati.
Location: Semarang, Kota Semarang, Jawa Tengah, Indonesia

5 komentar untuk "Mengatur Latar Belakang HTML Menggunakan Background Style DOM"

  1. AnonimJumat, 15 April 2022 pukul 09.36.00 WIB

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

    BalasHapus
    Balasan
    1. AnonimJumat, 15 April 2022 pukul 09.36.00 WIB

      Berikut adalah beberapa jenis browser yang dapat digunakan untuk mengaktifkan Style Backround DOM pada HTML:
      1. Chrome 1.0
      2. Internet Explorer 4.0
      3. Firefox 1.0
      4. Opera 3.5
      5. Safari 1.0

      Hapus
  2. AnonimSelasa, 19 April 2022 pukul 09.38.00 WIB

    Apa yang dimaksud dengan properti style background DOM pada HTML?

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

      Properti 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.

      Hapus
    2. AnonimSelasa, 19 April 2022 pukul 09.40.00 WIB

      Berfungsi 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

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 -