Dokumentasi CSS interaktif: Background Image

Q: Bagaimana cara menambahkan background image di CSS?

Pakai background-image: url("photo.jpg"); pada elemen. Path-nya relatif terhadap file CSS (atau terhadap halaman, untuk atribut style atau elemen ). Beri ukuran pada elemen, karena background tidak pernah membuat elemen kosong membesar.

Q: Bagaimana cara membuat background image menutupi seluruh elemen?

Pakai background-size: cover; bersama background-position: center;. Gambar diperbesar sampai mengisi kotak sepenuhnya dengan proporsi yang tetap, dan bagian yang berlebih dipotong.

Q: Apa perbedaan cover dan contain?

cover mengisi seluruh kotak dan memotong bagian yang tidak muat. contain menampilkan seluruh gambar dan menyisakan ruang kosong di dua sisi jika proporsinya berbeda.

Q: Bagaimana cara agar background image tidak berulang?

Tambahkan background-repeat: no-repeat;. Secara default, background image diulang ke dua arah untuk mengisi elemen.

Q: Kenapa background image saya tidak muncul?

Penyebab yang umum adalah path yang salah di url() (path-nya relatif terhadap file CSS), elemen tanpa tinggi karena tidak punya konten, atau shorthand background di bawahnya yang mengatur ulang gambar.

Background Image CSS: Size, Position, Repeat, Cover

background-image menaruh gambar atau gradien di belakang konten elemen. Pelajari url() dan gradien, background-size (cover dan contain), background-position, background-repeat, menumpuk beberapa background, dan shorthand background.

Halaman ini dilengkapi editor yang bisa dijalankan. Edit, jalankan, dan lihat output-nya seketika.

Oleh Kevin Spektor, Co-founder & CTO

Diterbitkan Sep 24, 2026

Cara menambahkan background image

background-image melukis gambar di belakang konten, padding, dan border elemen. Secara default, gambar dimulai dari pojok kiri atas padding box, memakai ukuran aslinya, dan diulang untuk mengisi kotak:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Background image</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    .dots {
      /* a 24x24 image: one blue dot */
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24'%3E%3Ccircle cx='12' cy='12' r='4' fill='%232563eb'/%3E%3C/svg%3E");
      height: 120px;
      padding: 16px;
      border: 2px solid #111827;
      font-weight: 600;
    }
  </style>
</head>
<body>
  <div class="dots">One 24px image, repeated to fill the box</div>
</body>
</html>

Di proyek sungguhan, url() menunjuk ke sebuah file: url("images/hero.jpg"). Path-nya relatif terhadap stylesheet yang memuatnya (atau terhadap halaman, untuk elemen <style>). Contoh-contoh di halaman ini memakai gambar SVG kecil yang ditulis langsung sebagai URL data: supaya bisa berjalan di mana saja.

Dua hal yang perlu kamu tahu sejak awal:

Background tidak memberi ukuran pada elemen. div kosong dengan background image tingginya 0px. Beri konten, padding, height, atau aspect-ratio.
Background image adalah dekorasi. Pembaca layar melewatinya dan tidak ada teks alt. Gambar yang punya makna sebaiknya ditaruh di elemen <img>.

background-size: cover, contain, dan panjang

background-size mengubah skala gambar. Dua kata kuncinya mempertahankan proporsi gambar:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>cover vs contain</title>
  <style>
    body { font-family: system-ui, sans-serif; font-size: 14px; }
    .row { display: flex; gap: 12px; flex-wrap: wrap; }
    .box {
      --landscape: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='200' viewBox='0 0 400 200'%3E%3Crect width='400' height='200' fill='%23bfdbfe'/%3E%3Ccircle cx='320' cy='50' r='24' fill='%23f59e0b'/%3E%3Cpath d='M0 200L120 70L220 200Z' fill='%2316a34a'/%3E%3Cpath d='M140 200L270 90L400 200Z' fill='%2315803d'/%3E%3C/svg%3E");
      width: 160px; height: 160px;
      background: var(--landscape) center / auto no-repeat, #e5e7eb;
      border: 2px solid #111827;
    }
    .cover { background-size: cover; }
    .contain { background-size: contain; }
    .stretch { background-size: 100% 100%; }
  </style>
</head>
<body>
  <div class="row">
    <div><div class="box"></div>auto (400x200, cropped)</div>
    <div><div class="box cover"></div>cover</div>
    <div><div class="box contain"></div>contain</div>
    <div><div class="box stretch"></div>100% 100% (distorted)</div>
  </div>
</body>
</html>

Lebar gambar dua kali tingginya, dan setiap kotak berbentuk persegi.

Nilai	Hasil
`auto` (default)	Ukuran asli gambar
`cover`	Diperbesar sampai kotak terisi penuh; sisanya dipotong
`contain`	Diperbesar sampai seluruh gambar muat; tersisa pita abu-abu di dua sisi
`200px`	Lebar 200px, tinggi menyesuaikan proporsi
`50% auto`	Setengah lebar kotak, tinggi menyesuaikan proporsi
`100% 100%`	Persis seukuran kotak; gambar jadi terdistorsi jika proporsinya berbeda

cover adalah pilihan biasa untuk banner hero dan kartu. contain untuk logo dan ilustrasi yang tidak boleh terpotong.

background-position dan background-repeat

background-position menempatkan gambar di dalam kotak, dengan kata kunci (top, center, bottom, left, right), persentase, atau panjang. background-repeat mengatur pengulangan. Coba beberapa nilai:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Position and repeat</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    #box {
      height: 140px; margin-top: 10px;
      border: 2px solid #111827;
      background-color: #f3f4f6;
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24'%3E%3Ccircle cx='12' cy='12' r='4' fill='%232563eb'/%3E%3C/svg%3E");
      background-size: 48px;
    }
    label { display: block; margin-top: 6px; }
  </style>
</head>
<body>
  <label>background-position: <input id="pos" value="center" size="18"></label>
  <label>background-repeat: <input id="rep" value="no-repeat" size="18"></label>
  <div id="box"></div>
  <script>
    const box = document.getElementById('box');
    const pos = document.getElementById('pos');
    const rep = document.getElementById('rep');
    const show = () => {
      box.style.backgroundPosition = pos.value;
      box.style.backgroundRepeat = rep.value;
    };
    pos.addEventListener('input', show);
    rep.addEventListener('input', show);
    show();
  </script>
</body>
</html>

Coba posisi top right, bottom 10px right 20px, dan 25% 75%, serta nilai repeat repeat-x, repeat-y, space (gambar diulang dengan jarak sehingga tidak ada yang terpotong), dan round (ukuran gambar disesuaikan sehingga jumlahnya pas bulat).

Menumpuk lapisan: beberapa background dan overlay teks

background-image menerima daftar yang dipisahkan koma. Lapisan pertama digambar paling atas. Penggunaan yang umum adalah gradien semi transparan di atas foto, supaya teks putih tetap terbaca:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Overlay</title>
  <style>
    body { font-family: system-ui, sans-serif; margin: 0; }
    .hero {
      --landscape: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='200' viewBox='0 0 400 200'%3E%3Crect width='400' height='200' fill='%23bfdbfe'/%3E%3Ccircle cx='320' cy='50' r='24' fill='%23f59e0b'/%3E%3Cpath d='M0 200L120 70L220 200Z' fill='%2316a34a'/%3E%3Cpath d='M140 200L270 90L400 200Z' fill='%2315803d'/%3E%3C/svg%3E");
      background-image:
        linear-gradient(rgb(17 24 39 / 10%), rgb(17 24 39 / 75%)),
        var(--landscape);
      background-size: cover;
      background-position: center;
      aspect-ratio: 16 / 7;
      display: flex; align-items: end;
      padding: 20px; box-sizing: border-box;
      color: white;
    }
    h1 { margin: 0; font-size: 32px; }
  </style>
</head>
<body>
  <div class="hero" id="hero"><h1>Readable over an image</h1></div>
</body>
</html>

aspect-ratio memberi tinggi pada kotak kosong, dan background-size: cover berlaku untuk kedua lapisan. Untuk resep gradien lainnya, lihat gradien CSS.

Shorthand background

background mengatur semua properti background dalam satu baris. Ukuran harus ditulis tepat setelah posisi, dipisahkan garis miring, dan warna ditaruh di lapisan terakhir:

.hero {
  background: url("hero.jpg") center / cover no-repeat, #1f2937;
}
/* the same as */
.hero {
  background-image: url("hero.jpg");
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  background-color: #1f2937;
}

Warna cadangan terlihat selama gambar dimuat, dan juga jika gambar gagal dimuat. Properti apa pun yang tidak kamu tulis di shorthand diatur ulang ke nilai default-nya, jadi tulis shorthand lebih dulu dan properti satuan sesudahnya.

Properti background lainnya

Properti	Fungsinya
`background-attachment: fixed`	Gambar tetap diam saat halaman di-scroll (diabaikan di Safari iOS)
`background-origin`	Apakah posisi dihitung dari tepi border, padding, atau konten
`background-clip`	Di mana background dilukis, termasuk `text` untuk mengisi huruf
`background-blend-mode`	Mencampur lapisan, misalnya dengan `multiply`

Kesalahan umum

Path yang salah. url() di stylesheet relatif terhadap file CSS, bukan terhadap halaman HTML.
Elemen kosong. Elemen itu tidak punya tinggi, jadi gambarnya tidak punya tempat untuk tampil.
Lupa no-repeat saat memakai contain atau gambar kecil: gambarnya akan diulang.
Meregangkan dengan 100% 100% padahal yang kamu maksud cover.
Gambar penting sebagai background. Pakai <img> dengan teks alt untuk konten; background tidak terlihat oleh pembaca layar.
Tidak memberi tanda kutip pada URL data: yang berisi spasi atau tanda kutip. Selalu tulis url("...").

Pertanyaan yang sering diajukan

Bagaimana cara menambahkan background image di CSS?

Pakai background-image: url("photo.jpg"); pada elemen. Path-nya relatif terhadap file CSS (atau terhadap halaman, untuk atribut style atau elemen <style>). Beri ukuran pada elemen, karena background tidak pernah membuat elemen kosong membesar.

Bagaimana cara membuat background image menutupi seluruh elemen?

Pakai background-size: cover; bersama background-position: center;. Gambar diperbesar sampai mengisi kotak sepenuhnya dengan proporsi yang tetap, dan bagian yang berlebih dipotong.

Apa perbedaan cover dan contain?

cover mengisi seluruh kotak dan memotong bagian yang tidak muat. contain menampilkan seluruh gambar dan menyisakan ruang kosong di dua sisi jika proporsinya berbeda.

Bagaimana cara agar background image tidak berulang?

Tambahkan background-repeat: no-repeat;. Secara default, background image diulang ke dua arah untuk mengisi elemen.

Kenapa background image saya tidak muncul?

Penyebab yang umum adalah path yang salah di url() (path-nya relatif terhadap file CSS), elemen tanpa tinggi karena tidak punya konten, atau shorthand background di bawahnya yang mengatur ulang gambar.

Konsep terkait