HTML Background Image

  1. › 
  2. ›  ›  › 
  3. HTML Background Image

Mengatur latar belakang elemen HTML menggunakan gambar

Ini adalah elemen <p> , paragraf dengan latar belakang gambar.
Cara mengatur latar belakang pada elemen HTML, ikuti petunjuknya dibawah ini.

1. Menambahkan atribut style dalam tag elemen. 
<p style='background-image:url(https://i.postimg.cc/QtGQ5KdH/img.webp)'></p>
2. Menggunakan tag <style> yang ditempatkan dalam tag <head>. 
<html>
  <head>
   <style>
    p {background-image:url(https://i.postimg.cc/QtGQ5KdH/img.webp)}
   </style>
  </head>
  <body>
    <p style='background-image:url(https://i.postimg.cc/QtGQ5KdH/img.webp)'></p>
  </body>
</html>

Cara ke 2 ini disebut dengan CSS (Cascading style sheet) atau Lembar gaya yang disusun secara terpisah dari elemen.
Kedua cara tersebut memberi hasil yang sama seperti pada contoh diatas.

Background image dengan file ukuran kecil

Gambar berukuran kecil yang akan digunakan sebagai latar belakang elemen yang lebih besar.
gambar pohon
<html>
  <head>
   <style>
    div {background-image:url(https://i.postimg.cc/DZJgPKv7/pohon.gif)}
   </style>
  </head>
  
  <body>
    <div >
      Ini adalah elemen div dengan dimensi width='100%' dan height='400px'
    </div>
  </body>
</html>

Tampilan elemen dengan latar belakang gambar kecil, secara otomatis gambar akan ditampilkan berulang memenuhi luas permukaan elemen:

Ini adalah elemen div dengan dimensi width='100%' dan height='250px'

Mengatur agar gambar latar belakang tidak ditampilkan berulang (repeat)

Ini adalah elemen div dengan dimensi width='100%' dan height='250px' 

<head>
   <style>
    div {
    background-image:url(https://i.postimg.cc/DZJgPKv7/pohon.gif);
    background-repeat: no-repeat;
    }
   </style>
</head>

Mengatur agar gambar latar belakang tidak ditampilkan berulang (repeat)

Mengatur gambar latar belakang agar tidak ditampilkan berulang adalah dengan menambahkan:
background-repeat:no-repeat pada tag <style> untuk elemen.
Begitupun sebaliknya, untuk mengatur gambar latar belakang agar ditampilkan berulang adalah dengan menghilangkan no-repeat atau dengan menggantinya dengan repeat

Mengatur agar gambar latar belakang meng-cover seluruh permukaan elemen.

<head>
   <style>
    div {
    background-image:url(https://i.postimg.cc/DZJgPKv7/pohon.gif);
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: cover;
    }
   </style>
</head>

Ini adalah elemen div dengan dimensi width='100%' dan height='300px'

Komentar

Posting Komentar