Series Mahir CSS #3 : Background CSS

Halo, teman-teman! Apa kabar hari ini? Semoga semangatnya tetap membara untuk belajar CSS. Kali ini kita akan membahas salah satu properti CSS yang sering banget dipakai, yaitu background. Dengan properti ini, kamu bisa memberikan sentuhan desain keren pada website, seperti warna, gambar, atau bahkan gradasi. Yuk, kita bahas satu per satu!

Apa itu Background CSS?

Properti background digunakan untuk mengatur latar belakang elemen HTML. Kamu bisa mengatur warna, gambar, posisi, ukuran, dan lainnya. Kombinasinya memungkinkan kamu membuat desain yang lebih menarik.

Properti Background yang Sering Digunakan

1. background-color
   Digunakan untuk memberikan warna pada latar belakang. Kamu bisa pakai nama warna, kode HEX, RGB, atau HSL.

Contoh:

div {
    background-color: lightblue;
    width: 200px;
    height: 100px;
}

HTML:

2. background-image
   Ingin menambahkan gambar? Pakai properti ini. Kamu bisa memasukkan URL gambar.

Contoh:

div {
    background-image: url('https://via.placeholder.com/150');
    background-repeat: no-repeat;
    background-size: cover;
    width: 200px;
    height: 150px;
}

HTML:

3. background-repeat
   Mengatur apakah gambar akan diulang (repeat). Pilihan nilainya:

• repeat (default)
• no-repeat
• repeat-x (horizontal)
• repeat-y (vertikal)

4. background-position
   Untuk menentukan posisi gambar. Kamu bisa gunakan nilai seperti top, center, bottom, atau koordinat seperti 50px 50px.

Contoh:

div {
    background-image: url('https://via.placeholder.com/150');
    background-repeat: no-repeat;
    background-position: center;
    width: 200px;
    height: 150px;
}

5. background-size
   Mengatur ukuran gambar. Pilihan nilainya:

• auto (default)
• cover (mengisi seluruh elemen tanpa distorsi)
• contain (gambar sepenuhnya terlihat tapi bisa ada ruang kosong).

6. background-attachment
   Mengontrol apakah latar belakang bergulir bersama halaman atau tetap di tempat. Nilainya:

• scroll (default, latar belakang ikut bergulir).
• fixed (tetap di tempat).

Kombinasi Background CSS

Kamu bisa menggabungkan semua properti menjadi satu baris dengan shorthand background.

Contoh:

div {
    background: lightblue url('https://via.placeholder.com/150') no-repeat center/cover;
    width: 300px;
    height: 150px;
}

Properti ini menjelaskan:

1. Warna latar: lightblue.
2. Gambar latar: URL gambar.
3. Ulang gambar: no-repeat.
4. Posisi: center.
5. Ukuran: cover.

HTML:

Tips dan Trik

• Gunakan gambar dengan ukuran optimal supaya website tidak lambat.
• Selalu cek kombinasi warna latar belakang dan teks untuk memastikan keterbacaan.
• Untuk latar belakang responsif, gunakan properti seperti background-size: cover.

Sekianlah belajar CSS tentang cara menggunakan background. Properti ini sering banget dipakai untuk mempercantik tampilan website. Artikel ini sangat berguna sebelum Anda melanjutkan ke tutorial CSS selanjutnya di www.code80vity.com. Yuk, terus eksplorasi dan sampai jumpa di tutorial berikutnya! ?