Properti Style backgroundImage DOM pada HTML digunakan untuk mengatur atau mengembalikan image background dari suatu elemen.

Sebelum memahami lebih dalam materi tentang Mengatur Gambar Latar Belakang HTML backgroundImage Style DOM, terlebih dahulu pelajari materi tentang: Mengatur Warna Latar Belakang HTML backgroundColor Style DOM, Mengatur Gambar Latar Belakang HTML backgroundAttachment DOM, dan Mengatur Latar Belakang HTML Menggunakan Background Style DOM.

Sintak:

untuk mendapatkan nilai properti backgroundImage: object.style.backgroundImage
untuk mengatur properti backgroundImage: object.style.backgroundImage = "image|none|initial|inherit"

Return Values: berfungsi untuk mengembalikan sebuah string yang merepresentasikan image background.

Property Values:

image: berfungsi untuk mengatur properti untuk menggunakan image tertentu, dimana image path yang digunakan telah ditentukan terlebih dahulu pada fungsi url().
none: berfungsi untuk mengatur properti untuk tidak menggunakan image background.
initial: berfungsi untuk mengatur properti backgroundImage ke nilai default-nya.
inherit: berfungsi untuk menerima property inherit dari properti parent.

Contoh:

<!DOCTYPE html>

<html

lang="en">

<head>

<title>

Properti Style backgroundImage

DOM

</title>

<style>

.bg-img

{

border: solid;

height: 180px;

width: 200px;

}

</style>

</head>

<body>

<h1

style="color: green">

Blog Elfan

</h1>

<b>

Properti DOM Style

backgroundImage

</b>

class="bg-img">

</p>

<button

onclick="changeImage()">

Change source of background

image

</button>

function changeImage()

{

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

// Pengaturan backgroundImage

// ke url

elem.style.backgroundImage =

"url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg0fWTvYnJ4J4D_mj8vUbGpufPYHsq8Xsw2swXjSTyWIpM8K3UbEtnLBTytORLimGCcVDoHRuUrCyINBQFaCu30OBjFQwdo84zrF3aNZtbZSBa9JZk9ah7OTYVsDPard9U6oxAi6-y05Mg/s35/t%25252Bkotak%25252Bwhite.png')";

}

</script>

</body>

</html>

Output:

Blog Elfan

Properti DOM Style backgroundImage

Contoh:

<!DOCTYPE html>

<html

lang="en">

<head>

<title>

Properit Style backgroundImage

DOM

</title>

<style>

.bg-img2

{

border: solid;

height: 180px;

width: 200px;

background-image:

url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg0fWTvYnJ4J4D_mj8vUbGpufPYHsq8Xsw2swXjSTyWIpM8K3UbEtnLBTytORLimGCcVDoHRuUrCyINBQFaCu30OBjFQwdo84zrF3aNZtbZSBa9JZk9ah7OTYVsDPard9U6oxAi6-y05Mg/s35/t%25252Bkotak%25252Bwhite.png');

}

</style>

</head>

<body>

<h1

style="color: green">

Blog Elfan

</h1>

<b>

Properti Style backgroundImage

</b>

class="bg-img2">

</p>

<button

onclick="changeImage2()">

Change source of background

image

</button>

function changeImage2()

{

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

// Pengaturan backgroundImage

// ke tipe none

elem.style.backgroundImage = "none";

}

</script>

</body>

</html>

Output:

Blog Elfan

Properti Style backgroundImage

Contoh:

<!DOCTYPE html>

<html

lang="en">

<head>

<title>

Properti Style backgroundImage

DOM

</title>

<style>

.bg-img3

{

border: solid;

height: 180px;

width: 200px;

background-image:

}

</style>

</head>

<body>

<h1

style="color: green">

Blog Elfan

</h1>

<b>

Properti Style backgroundImage

DOM

</b>

class="bg-img3">

</p>

<button

onclick="changeImage3()">

Change source of background

image

</button>

function changeImage3()

{

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

// Pengaturan backgroundImage // ke tipe initial

elem.style.backgroundImage = "initial";

}

</script>

</body>

</html>

Output:

Blog Elfan

Properti Style backgroundImage DOM

Baca Juga:

Contoh:

<!DOCTYPE html>

<html

lang="en">

<head>

<title>

Properti Style backgroundImage

DOM

</title>

<style>

#parent

{

border: solid;

height: 200px;

width: 300px;

background:

no-repeat;

background-size: cover;}

.bg-img4

{

border: dashed;

height: 100px;

width: 100px;

background-size: cover;}

</style>

</head>

<body>

<h1

style="color: green">

Blog Elfan

</h1>

<b>

Properti Style backgroundImage

DOM

</b>

<div

id="parent">

</div>

<button

onclick="changeImage4()">

Change source of background

image

</button>

function changeImage4()

{

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

// Pengaturan backgroundImage // ke tipe inherit

elem.style.backgroundImage = "inherit";

}

</script>

</body>

</html>

Output:

Blog Elfan

Properti Style backgroundImage DOM

Mengatur gambar latar belakang pada halaman web menggunakan gaya atau aturan gaya dalam pengkodean HTML adalah salah satu aspek penting dalam mendesain antarmuka situs web yang menarik dan fungsional. Gambar latar belakang memiliki peran yang sangat besar dalam menciptakan suasana tertentu pada sebuah halaman web. Dengan menggunakan gaya gambar latar belakang, halaman web dapat diberi tampilan yang lebih hidup dan dinamis, yang tidak hanya menambah daya tarik visual, tetapi juga memperkuat pesan atau tema yang ingin disampaikan oleh situs tersebut.

Pengaturan gambar latar belakang dilakukan melalui penggunaan aturan gaya atau gaya CSS. Gaya ini memungkinkan pengembang untuk menentukan bagaimana gambar tersebut ditampilkan pada halaman web, termasuk ukuran, posisi, dan perilaku gambar saat halaman web diubah ukurannya atau saat pengunjung menggulir halaman tersebut. Salah satu metode yang sering digunakan untuk mengatur gambar latar belakang adalah melalui pengaturan properti latar belakang di dalam aturan gaya, yang bisa dilakukan baik dalam file gaya terpisah maupun langsung pada elemen HTML menggunakan atribut gaya.

Pengaturan gambar latar belakang menggunakan JavaScript memberi kebebasan lebih dalam mengontrol tampilan halaman secara dinamis. JavaScript memungkinkan pengembang untuk memanipulasi gaya elemen HTML selama halaman web dijalankan, yang berarti gambar latar belakang dapat diubah atau disesuaikan berdasarkan interaksi pengguna, kondisi waktu, atau respons terhadap perubahan ukuran layar. Menggunakan JavaScript, gambar latar belakang dapat ditambahkan atau diubah secara otomatis tanpa memerlukan muat ulang halaman, menjadikannya pilihan yang sangat berguna untuk menciptakan pengalaman pengguna yang lebih interaktif.

Ketika sebuah gambar digunakan sebagai latar belakang, pengaturan posisinya menjadi sangat penting. Tanpa pengaturan posisi yang tepat, gambar latar belakang dapat terlihat kacau atau tidak sesuai dengan keinginan pengembang. Properti gaya seperti "background-position" memungkinkan pengembang untuk menentukan posisi gambar dalam elemen yang menjadi latar belakang. Pengaturan posisi ini bisa menggunakan nilai absolut seperti "atas kiri", "tengah", atau "bawah kanan", atau dapat juga disesuaikan menggunakan nilai persentase atau ukuran tertentu yang lebih tepat.

Selain posisi, ukuran gambar latar belakang juga sangat penting. Beberapa gambar latar belakang perlu disesuaikan ukurannya agar sesuai dengan dimensi elemen yang menjadi tempat gambar tersebut ditempatkan. Properti "background-size" memberikan cara untuk mengontrol bagaimana gambar akan menyesuaikan diri dengan ukuran elemen. Penggunaan ukuran seperti "cover" atau "contain" memungkinkan gambar untuk diatur secara proporsional, memastikan gambar tidak terdistorsi meskipun ukuran elemen berubah.

Pengaturan gambar latar belakang tidak hanya terbatas pada penampilan visual, tetapi juga melibatkan pengendalian perilaku gambar saat halaman diubah ukurannya. Salah satu pengaturan yang berguna adalah "background-attachment", yang memungkinkan gambar latar belakang untuk tetap berada di posisi tetap atau mengikuti saat halaman digulir. Pengaturan ini memberi efek visual yang menarik, dimana gambar latar belakang tampak diam saat konten halaman bergerak.

Saat mengatur gambar latar belakang, penting juga untuk mempertimbangkan performa dan kecepatan pemuatan halaman. Gambar yang terlalu besar atau tidak dioptimalkan dapat menyebabkan waktu muat halaman menjadi lebih lama, yang pada gilirannya dapat memengaruhi pengalaman pengguna. Oleh karena itu, penting untuk memilih gambar dengan resolusi yang sesuai dan ukuran file yang lebih kecil tanpa mengorbankan kualitas gambar secara signifikan. Penggunaan format gambar yang efisien seperti JPEG atau WebP dapat membantu mengurangi ukuran file tanpa mengurangi kualitas gambar yang ditampilkan.

Selain itu, pengaturan gambar latar belakang dapat diperluas dengan penggunaan efek transisi atau animasi. Gambar latar belakang dapat dipadukan dengan efek transisi yang mulus, memberikan pengalaman yang lebih menarik bagi pengunjung halaman. Misalnya, efek transisi dapat digunakan untuk mengubah gambar latar belakang saat pengguna menggulir halaman atau saat elemen halaman tertentu diaktifkan. Efek ini menambah dimensi interaktif pada halaman web, memberikan kesan bahwa halaman tersebut hidup dan responsif terhadap tindakan pengunjung.

Namun, meskipun gambar latar belakang dapat mempercantik tampilan halaman web, penting untuk tidak berlebihan dalam penggunaannya. Penggunaan gambar latar belakang yang terlalu banyak atau terlalu mencolok dapat mengalihkan perhatian dari konten utama halaman. Oleh karena itu, pengembang harus memastikan bahwa gambar latar belakang tidak mengganggu keterbacaan teks atau elemen penting lainnya pada halaman. Salah satu cara untuk menghindari gangguan ini adalah dengan menambahkan lapisan transparansi pada gambar latar belakang, sehingga gambar tetap terlihat namun tidak menutupi teks atau elemen lainnya.

Pengaturan gambar latar belakang juga berkaitan dengan prinsip desain responsif. Di era perangkat yang beragam, mulai dari ponsel pintar hingga desktop, sangat penting untuk memastikan bahwa gambar latar belakang dapat menyesuaikan diri dengan berbagai ukuran layar. Desain responsif memungkinkan gambar latar belakang untuk tampil dengan cara yang optimal pada berbagai perangkat, menjaga tampilan tetap konsisten dan menarik tanpa mengurangi kualitas visual. Untuk itu, menggunakan pengaturan seperti "background-size: cover" atau "background-size: contain" dapat membantu memastikan bahwa gambar latar belakang terlihat baik pada layar dengan ukuran yang berbeda-beda.

Penggunaan gambar latar belakang dalam konteks halaman web bukan hanya soal estetika, tetapi juga tentang bagaimana gambar tersebut dapat mendukung pengalaman pengguna secara keseluruhan. Gambar latar belakang yang baik dapat meningkatkan daya tarik visual halaman web, membantu menyampaikan pesan atau tema tertentu, dan menambah kesan profesional pada situs tersebut. Dengan pengaturan yang tepat, gambar latar belakang dapat menjadi elemen desain yang sangat kuat, yang mampu memperkaya tampilan halaman tanpa mengorbankan kecepatan atau fungsionalitas.

Kesimpulannya, mengatur gambar latar belakang pada halaman web adalah proses yang melibatkan pertimbangan berbagai aspek, mulai dari ukuran dan posisi gambar hingga bagaimana gambar tersebut berperilaku saat halaman digulir atau ukurannya diubah. Dengan menggunakan aturan gaya dan pengkodean yang tepat, gambar latar belakang dapat menjadi elemen desain yang efektif dalam meningkatkan tampilan dan pengalaman pengguna. Pemilihan gambar yang sesuai, pengaturan gaya yang tepat, serta perhatian terhadap performa halaman adalah faktor penting dalam menciptakan halaman web yang tidak hanya menarik, tetapi juga cepat dan responsif.

Referensi Tambahan:

Artikel ini akan dibaca oleh: Eka Rositasari, Elisa Fitri Rahmawati, Enggar Vania Paramesti, Enrico Dui Martinez, dan Erna Melina.

Location: Semarang, Kota Semarang, Jawa Tengah, Indonesia

5 komentar untuk "Mengatur Gambar Latar Belakang HTML backgroundImage Style DOM"

AnonimSabtu, 16 April 2022 pukul 09.34.00 WIB
Jenis browser apa saja yang dapat digunakan untuk mengaktifkan properti backgroundImage Style DOM pada HTML?
BalasHapus
Balasan
AnonimSelasa, 19 April 2022 pukul 09.50.00 WIB
Apa yang dimaksud dengan properti backgroundImage Style DOM pada HTML?
BalasHapus
Balasan

Tambahkan komentar

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 -

E-SISTEM:	Bahasa Pemrograman:
open_in_newE-RAPORT open_in_newE-PERPUS open_in_newE-LITERASI open_in_newE-KONSELING	open_in_newBahasa HTML open_in_newBahasa C open_in_newBahasa Java open_in_newBahasa C++
Materi Penelitian:	Administrasi Siswa:
open_in_newKlasifikasi Penelitian open_in_newPenelitian Tindakan Kelas open_in_newStatistika Penelitian open_in_newContoh Skripsi	open_in_newNilai dan Arsip open_in_newPerbaikan Data open_in_newKatalog Siswa open_in_newBuku Digital
Referensi Umum:	Magic
open_in_newMapel Informatika open_in_newLogo Instansi dan Organisasi open_in_newArtikel open_in_newTools dan Game	Mystery Box

PENELITIAN.ID

Mengatur Gambar Latar Belakang HTML backgroundImage Style DOM

Blog Elfan

Blog Elfan

Blog Elfan

Blog Elfan

5 komentar untuk "Mengatur Gambar Latar Belakang HTML backgroundImage Style DOM"

Menu Halaman Statis