HTML

Background Image HTML: Cara Membuat dan Contoh Codenya

Background Image di HTML dapat didefinisikan oleh hampir semua elemen HTML.

Background Image pada elemen HTML

Untuk menambahkan gambar latar belakang(background image) pada elemen HTML, gunakan atribut HTML style dan properti CSS background-image:

Contoh :
Tambahkan gambar latar belakang pada elemen HTML:

<!DOCTYPE html>
<html>
<body>

<h2>Background Image</h2>

<p>A background image for a div elememt:</p>

<div style="background-image: url('https://dosenit.com/wp-content/uploads/2020/10/img_girl.jpg');">
You can specify background images<br>
for any visible HTML element.<br>
In this example, the background image<br>
is specified for a div element.<br>
By default, the background-image<br>
will repeat itself in the direction(s)<br>
where it is smaller than the element<br>
where it is specified. (Try resizing the<br>
browser window to see how the<br>
background image behaves.
</div>



</body>
</html>

Kita juga bisa menentukan gambar latar belakang dalam elemen <style>, dibagian <head>

Contoh :
Tentukan gambar latar belakang dalam elemen <style>

<!DOCTYPE html>
<html>
<head>
<style>
div {
  background-image: url('https://dosenit.com/wp-content/uploads/2020/10/img_girl.jpg');
}
</style>
</head>
<body>

<h2>Background Image</h2>

<div>
You can specify background images<br>
for any visible HTML element.<br>
In this example, the background image<br>
is specified for a div element.<br>
By default, the background-image<br>
will repeat itself in the direction(s)<br>
where it is smaller than the element<br>
where it is specified. (Try resizing the<br>
browser window to see how the<br>
background image behaves.
</div>

</body>
</html>

Background Image di Halaman Web

Jika kita ingin seluruh halaman memiliki background image, maka kita harus menentukan gambar latar belakang pada elemen <body> :

Contoh
Tambahkan background image untuk seluruh halaman web:

<!DOCTYPE html>
<html>
<head>
<style>
body {
  background-image: url('https://dosenit.com/wp-content/uploads/2020/10/img_girl.jpg');
}
</style>
</head>
<body>

<h2>Background Image</h2>

<p>By default, the background image will repeat itself if it is smaller than the element where it is specified, in this case the body element.</p>

</body>
</html>

Repeat Background Image HTML

Jika gambar latar belakang lebih kecil dari elemen, gambar akan berulang, horizontal dan vertikal, hingga mencapai akhir elemen:

Contoh :

<!DOCTYPE html>
<html>
<head>
<style>
body {
  background-image: url('https://dosenit.com/wp-content/uploads/2020/10/img_girl.jpg');
}
</style>
</head>
<body>

<h2>Ulangi Gambar</h2>

<p>By default, the background image will repeat itself if it is smaller than the element where it is specified, in this case the body element.</p>

</body>
</html>

Untuk menghindari gambar latar terulang kembali, setel properti background-repeat ke no-repeat.

Contoh :

<!DOCTYPE html>
<html>
<head>
<style>
body {
  background-image: url('https://dosenit.com/wp-content/uploads/2020/10/img_girl.jpg');
  background-repeat: no-repeat;
}
</style>
</head>
<body>

<h2>Background No Repeat</h2>

<p>You can avoid the image from being repeated by setting the background-repeat property to "no-repeat".</p>

</body>
</html>

Background Cover HTML

Jika kita ingin gambar latar menutupi seluruh elemen, kita bisa menyetel properti background-size menjadi cover.

Selain itu, untuk memastikan seluruh elemen selalu tertutup, setel properti background-attachment menjadi fixed:

Dengan cara ini,backgroud image akan menutupi seluruh elemen tanpa ukuran yang lebih lebar (gambar akan mempertahankan proporsi aslinya):

Contoh :

<!DOCTYPE html>
<html>
<head>
<style>
body {
  background-image: url('https://dosenit.com/wp-content/uploads/2020/10/img_girl.jpg');
  background-repeat: no-repeat;
  background-attachment: fixed;  
  background-size: cover;
}
</style>
</head>
<body>

<h2>Background Cover</h2>

<p>Set the background-size property to "cover" and the background image will cover the entire element, in this case the body element.</p>

</body>
</html>

Background Stretch

Jika kita ingin gambar latar meregang agar pas dengan seluruh elemen, kita dapat menyetel properti background-size menjadi 100% 100%:

Coba ubah ukuran jendela browser dan gambar akan melebar sehingga menutupi seluruh elemen.

<!DOCTYPE html>
<html>
<head>
<style>
body {
  background-image: url('https://dosenit.com/wp-content/uploads/2020/10/img_girl.jpg');
  background-repeat: no-repeat;
  background-attachment: fixed; 
  background-size: 100% 100%;
}
</style>
</head>
<body>

<h2>Background Stretch</h2>

<p>Set the background-size property to "100% 100%" and the background image will be stretched to cover the entire element, in this case the body element.</p>

</body>
</html>

Hanifah Nurbaeti

Share
Tags: html