Skip to content
Kuliah Coding

CSS Background

Materi ini akan membantumu menghias elemen HTML dengan warna latar, gambar latar, dan berbagai efek background keren lainnya!

Apa Itu CSS Background?

Section titled “Apa Itu CSS Background?”

Background dalam CSS digunakan untuk mengatur tampilan latar belakang dari sebuah elemen. Kamu bisa mengatur:

  • Warna latar
  • Gambar latar
  • Posisi gambar
  • Ukuran gambar
  • Pengulangan gambar
  • Efek lapisan background (multiple background)

Properti Background Utama

Section titled “Properti Background Utama”

CSS Background memiliki beberapa properti yang biasa digunakan diantaranya:

PropertiFungsi
background-colorMengatur warna latar
background-imageMenambahkan gambar sebagai latar
background-repeatMengatur apakah gambar diulang
background-positionMengatur posisi gambar
background-sizeMengatur ukuran gambar
background-attachmentMengatur efek scroll gambar
background (shorthand)Gabungan semua properti di atas

1. background-color

Section titled “1. background-color”

Fungsinya untuk menentukan warna latar belakang dari sebuah elemen html yang dipilih.

Contoh:

body {
  background-color: lightblue;
}

2. background-image

Section titled “2. background-image”

Fungsinya untuk mengatur warna latar belakang dari sebuah elemen html menggunakan gambar.

Contoh:

div {
  background-image: url('background.jpg');
}

3. background-repeat

Section titled “3. background-repeat”

Fungsinya untuk mengulang gambar background agar memenuhi layar.

Beberapa value yang bisa digunakan:

NilaiFungsi
repeatGambar diulang (default)
no-repeatGambar tidak diulang
repeat-xUlang horizontal saja
repeat-yUlang vertikal saja

Contoh:

div {
  background-repeat: no-repeat;
}

4. background-position

Section titled “4. background-position”

Fungsinya untuk menentukan di mana gambar latar diletakkan.

Contoh:

div {
  background-position: center;
}

Contoh nilai:

  • top, bottom, left, right, center
  • 50% 50%, 10px 20px, dll

5. background-size

Section titled “5. background-size”

Fungsinya untuk mengatur ukuran gambar latar.

NilaiFungsi
autoUkuran asli gambar
coverMenutupi seluruh elemen
containGambar muat seluruh elemen (tidak crop)

Contoh:

div {
  background-size: cover;
}

6. background-attachment

Section titled “6. background-attachment”

Fungsinya untuk mengatur apakah gambar ikut scroll atau tetap diam.

div {
  background-attachment: fixed; /* Efek paralaks */
}

Contoh Kode Lengkap

Section titled “Contoh Kode Lengkap”
<!DOCTYPE html>
<html>
<head>
  <style>
    body {
      background-image: url('https://picsum.photos/1200/800');
      background-size: cover;
      background-repeat: no-repeat;
      background-position: center;
      background-attachment: fixed;
      color: white;
      text-shadow: 1px 1px 2px black;
      font-family: sans-serif;
      height: 100vh;
      margin: 0;
    }


    h1 {
      text-align: center;
      padding-top: 40vh;
    }
  </style>
</head>
<body>


  <h1>Efek Background Gambar</h1>


</body>
</html>

Hasilnya:

css-background-example

Shorthand background

Section titled “Shorthand background”

Gabungkan semua properti dalam satu baris:

Contoh:

div {
  background: url('image.jpg') no-repeat center/cover fixed;
}

Kesimpulan

Section titled “Kesimpulan”

Dengan background, kamu bisa:

  • Menambahkan suasana visual
  • Menjadikan elemen lebih hidup dan menarik
  • Membuat efek parallax, hero section, atau banner