Tentu, ini dia artikel lanjutannya.

Selamat datang kembali di seri tutorial CSS! Setelah kita belajar dasar-dasar penulisan sintaks CSS, kini saatnya membuat tampilan web kita menjadi lebih hidup. Salah satu cara paling efektif untuk mengubah suasana sebuah halaman adalah dengan memanipulasi latar belakangnya.

Di tutorial ini, kita akan fokus pada semua hal yang berkaitan dengan properti background di CSS. Anda akan belajar cara mengubah warna, menambahkan gambar, mengontrol posisinya, hingga menggunakan teknik modern seperti gradasi. Mari kita mulai! 🎨

1. Warna Latar Belakang (background-color)

Properti paling dasar adalah background-color. Properti ini digunakan untuk mengatur warna solid pada latar belakang sebuah elemen. Anda bisa menggunakan berbagai format nilai warna:

• Nama Warna (Keyword): red, blue, lightgray
• HEX: #RRGGBB, contoh: #ffffff untuk putih.
• RGB: rgb(red, green, blue), contoh: rgb(255, 165, 0) untuk oranye.
• RGBA: Sama seperti RGB, namun dengan tambahan nilai alpha (transparansi) dari 0 (transparan total) hingga 1 (solid). Contoh: rgba(45, 80, 210, 0.5).

Contoh Kode:

body {
  /* Mengatur latar belakang seluruh halaman menjadi abu-abu terang */
  background-color: #f4f4f4;
}

.box-transparan {
  /* Elemen ini akan memiliki latar biru dengan transparansi 50% */
  background-color: rgba(0, 0, 255, 0.5);
}

2. Gambar Latar Belakang (background-image)

Untuk menggunakan gambar sebagai latar belakang, kita memakai properti background-image dengan fungsi url().

Contoh Kode:

.hero-section {
  background-image: url('images/pemandangan.jpg');
}

Penting: Secara default, jika gambar lebih kecil dari elemennya, gambar tersebut akan diulang (ditumpuk) baik secara horizontal maupun vertikal untuk mengisi seluruh ruang. Perilaku ini bisa kita kontrol dengan properti berikutnya.

3. Mengontrol Gambar Latar Belakang

Saat menggunakan background-image, ada beberapa properti tambahan yang sangat penting untuk mengontrol perilakunya.

background-repeat

Mengatur apakah dan bagaimana gambar latar akan diulang.

• repeat: (Default) Gambar diulang secara horizontal dan vertikal.
• no-repeat: Gambar hanya ditampilkan sekali.
• repeat-x: Gambar diulang hanya secara horizontal.
• repeat-y: Gambar diulang hanya secara vertikal.

background-position

Mengatur posisi awal dari sebuah background-image. Anda bisa menggunakan kata kunci (top, center, bottom, left, right) atau nilai numerik (px, %).

• background-position: center; (Posisi di tengah)
• background-position: top right; (Posisi di pojok kanan atas)
• background-position: 50px 100px; (50px dari kiri, 100px dari atas)

background-size

Mengatur ukuran gambar latar belakang.

• auto: (Default) Gambar ditampilkan dalam ukuran aslinya.
• cover: Mengubah ukuran gambar agar menutupi seluruh area elemen, bahkan jika harus memotong sebagian gambar (paling umum digunakan).
• contain: Mengubah ukuran gambar sebesar mungkin tanpa memotongnya, yang mungkin akan menyisakan ruang kosong.
• Nilai numerik: background-size: 200px 150px; (lebar 200px, tinggi 150px).

background-attachment

Mengatur apakah gambar latar belakang ikut bergulir (scroll) bersama halaman atau tetap diam di posisinya.

• scroll: (Default) Latar belakang ikut bergulir bersama konten.
• fixed: Latar belakang tetap diam di viewport, menciptakan efek parallax yang menarik.

4. Shorthand Property: background ✨

Menulis semua properti di atas satu per satu bisa jadi melelahkan. Untungnya, CSS menyediakan properti shorthand background untuk menggabungkan semuanya dalam satu baris deklarasi.

Urutan yang umum digunakan adalah:

background: [color] [image] [repeat] [attachment] [position] / [size];

Penting: Properti background-size harus didefinisikan setelah background-position dan dipisahkan dengan garis miring (/).

Contoh Tanpa Shorthand:

.hero-section {
  background-color: #4682B4;
  background-image: url('images/pattern.png');
  background-repeat: no-repeat;
  background-position: center;
  background-attachment: fixed;
  background-size: cover;
}

Contoh Dengan Shorthand (Lebih Efisien):

.hero-section {
  background: #4682B4 url('images/pattern.png') no-repeat fixed center / cover;
}

5. Level Up: Gradasi & Multiple Backgrounds 🚀

Properti background-image juga bisa digunakan untuk membuat efek gradasi warna tanpa memerlukan file gambar.

• Linear Gradient: Membuat gradasi lurus.

  background-image: linear-gradient(to right, #ff7e5f, #feb47b);

• Radial Gradient: Membuat gradasi melingkar dari tengah ke luar.

  background-image: radial-gradient(circle, #84fab0, #8fd3f4);

Anda bahkan bisa menumpuk beberapa latar belakang (misalnya, sebuah ikon di atas gradasi) dengan memisahkannya menggunakan koma. Latar belakang yang disebut pertama akan berada di lapisan paling atas.

Contoh Multiple Backgrounds:

.card {
  background-image: url('icon.svg'), linear-gradient(to top, #a18cd1, #fbc2eb);
  background-repeat: no-repeat, no-repeat;
  background-position: top 15px right 15px, 0 0;
  background-size: 40px, auto;
}

Selamat! Anda kini telah menguasai berbagai teknik untuk memanipulasi latar belakang dengan CSS. Kemampuan ini adalah fondasi penting untuk menciptakan desain web yang menarik secara visual.

Di tutorial selanjutnya, kita akan membahas salah satu konsep paling fundamental di CSS: Box Model (margin, border, padding). Sampai jumpa!