CSS Dasar #11 - Background: background-color, background-image, background-repeat, background-position, background-size

byFerdian Rahabista -
0

Setelah kita mempelajari berbagai format warna, sekarang saatnya mengenal properti background di CSS. Background adalah salah satu properti paling penting dalam desain website. Dengan background, kita bisa memberi warna latar, gambar latar, gradien, dan mengatur posisinya dengan presisi.

Apa Itu Properti Background?

Properti background digunakan untuk mengatur latar belakang suatu elemen. CSS menyediakan banyak properti background yang bisa dikombinasikan untuk menciptakan efek visual yang menarik.

Properti Background yang Akan Dipelajari:
- background-color → warna latar belakang
- background-image → gambar latar belakang
- background-repeat → cara pengulangan gambar
- background-position → posisi gambar
- background-size → ukuran gambar
- background (shorthand) → gabungan semua properti

1. background-color (Warna Latar)

background-color mengatur warna latar belakang elemen. Nilai bisa berupa named colors, HEX, RGB, RGBA, HSL, atau HSLA.

Contoh:

<style>
    .bg-named { background-color: lightblue; padding: 20px; }
    .bg-hex { background-color: #3b82f6; padding: 20px; color: white; }
    .bg-rgb { background-color: rgb(34, 197, 94); padding: 20px; color: white; }
    .bg-rgba { background-color: rgba(239, 68, 68, 0.8); padding: 20px; color: white; }
    .bg-hsl { background-color: hsl(280, 100%, 50%); padding: 20px; color: white; }
</style>
background-color: lightblue
background-color: #3b82f6
background-color: rgb(34,197,94)
background-color: rgba(239,68,68,0.8)
background-color: hsl(280,100%,50%)

2. background-image (Gambar Latar)

background-image digunakan untuk menampilkan gambar sebagai latar belakang. Gunakan fungsi url() untuk menentukan path gambar.

Contoh:

<style>
    .bg-image {
        background-image: url('https://picsum.photos/id/1/400/200');
        padding: 60px 20px;
        color: white;
        text-shadow: 2px 2px 4px rgba(0,0,0,0.5);
    }
</style>

<div class="bg-image">
    <h3>Background dengan Gambar</h3>
    <p>Ini adalah contoh background image.</p>
</div>

Background dengan Gambar

Ini adalah contoh background image.

Tips background-image:
  • Gunakan gambar dengan ukuran yang sesuai agar tidak terlalu berat
  • Pastikan teks di atas gambar tetap terbaca (gunakan text-shadow atau overlay)
  • Selalu siapkan warna background cadangan (fallback) jika gambar gagal dimuat

3. background-repeat (Pengulangan Gambar)

background-repeat mengatur bagaimana gambar latar diulang. Nilai default adalah repeat (diulang ke kanan dan bawah).

Nilai-nilai background-repeat:

Nilai Fungsi Contoh
repeat (default) Diulang ke kanan dan ke bawah Pola berulang
repeat-x Diulang hanya secara horizontal (sumbu X) Garis dekorasi horizontal
repeat-y Diulang hanya secara vertikal (sumbu Y) Garis dekorasi vertikal
no-repeat Tidak diulang (hanya satu kali) Logo, ikon besar

Contoh:

<style>
    .bg-repeat {
        background-image: url('https://picsum.photos/id/20/50/50');
        background-repeat: repeat;
        padding: 20px;
        height: 150px;
        border: 1px solid #ccc;
    }
    .bg-repeat-x {
        background-image: url('https://picsum.photos/id/20/50/50');
        background-repeat: repeat-x;
        padding: 20px;
        height: 80px;
        border: 1px solid #ccc;
    }
    .bg-no-repeat {
        background-image: url('https://picsum.photos/id/20/100/100');
        background-repeat: no-repeat;
        padding: 20px;
        height: 150px;
        border: 1px solid #ccc;
    }
</style>

repeat (default) - diulang ke kanan dan bawah:

repeat-x - diulang horizontal:

no-repeat - tidak diulang:

4. background-position (Posisi Gambar)

background-position mengatur posisi gambar latar (bekerja saat no-repeat atau gambar tidak memenuhi area).

Nilai-nilai background-position:

Nilai Penjelasan
left top Pojok kiri atas (default)
center center Tengah-tengah
right bottom Pojok kanan bawah
50% 50% Posisi dengan persen
20px 30px Posisi dengan pixel

Contoh:

<style>
    .pos-center {
        background-image: url('https://picsum.photos/id/26/80/80');
        background-repeat: no-repeat;
        background-position: center center;
        height: 150px;
        border: 1px solid #ccc;
    }
    .pos-right {
        background-image: url('https://picsum.photos/id/26/80/80');
        background-repeat: no-repeat;
        background-position: right bottom;
        height: 150px;
        border: 1px solid #ccc;
    }
    .pos-custom {
        background-image: url('https://picsum.photos/id/26/80/80');
        background-repeat: no-repeat;
        background-position: 20px 30px;
        height: 150px;
        border: 1px solid #ccc;
    }
</style>

center center (tengah):

right bottom (kanan bawah):

20px 30px (kustom):

5. background-size (Ukuran Gambar)

background-size mengatur ukuran gambar latar. Sangat berguna untuk membuat gambar responsif.

Nilai-nilai background-size:

Nilai Fungsi
auto (default) Ukuran asli gambar
cover Memenuhi seluruh area (mungkin terpotong)
contain Seluruh gambar terlihat (mungkin ada ruang kosong)
100px 200px Ukuran spesifik (lebar x tinggi)
50% 50% Ukuran relatif terhadap parent

Contoh:

<style>
    .size-cover {
        background-image: url('https://picsum.photos/id/15/400/300');
        background-size: cover;
        background-position: center;
        height: 200px;
        color: white;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .size-contain {
        background-image: url('https://picsum.photos/id/15/400/300');
        background-size: contain;
        background-repeat: no-repeat;
        background-position: center;
        height: 200px;
        border: 1px solid #ccc;
    }
</style>

cover - memenuhi area (terpotong):

background-size: cover

contain - semua gambar terlihat (ada ruang kosong):

Perbedaan cover vs contain:
  • cover → gambar akan memenuhi seluruh area (bisa terpotong). Cocok untuk hero section atau banner full-width.
  • contain → seluruh gambar terlihat (mungkin ada ruang kosong di samping/atas-bawah). Cocok untuk logo atau ikon.

6. Background Shorthand (Gabungan)

Kita bisa menggabungkan semua properti background dalam satu baris dengan shorthand background.

Urutan shorthand background:

background: color image repeat position / size;

Contoh:

/* Shorthand background */
.bg-shorthand {
    background: #1e293b url('gambar.jpg') no-repeat center center / cover;
}

/* Tanpa shorthand (panjang) */
.bg-long {
    background-color: #1e293b;
    background-image: url('gambar.jpg');
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
}

Contoh shorthand background:

background: #1e293b url(...) no-repeat center center / cover;

Satu baris kode untuk semua properti background!

Contoh Proyek: Hero Section dengan Background Image

<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Background CSS - Hero Section</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        
        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            background: #f0f4f8;
        }
        
        /* HERO SECTION dengan background image */
        .hero {
            background-image: linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5)), url('https://picsum.photos/id/104/1200/500');
            background-size: cover;
            background-position: center center;
            background-repeat: no-repeat;
            height: 500px;
            display: flex;
            align-items: center;
            justify-content: center;
            text-align: center;
            color: white;
        }
        
        .hero-content h1 {
            font-size: 48px;
            margin-bottom: 20px;
            text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
        }
        
        .hero-content p {
            font-size: 18px;
            margin-bottom: 30px;
            text-shadow: 1px 1px 2px rgba(0,0,0,0.3);
        }
        
        .btn {
            background-color: #3b82f6;
            color: white;
            padding: 12px 30px;
            border: none;
            border-radius: 30px;
            font-size: 16px;
            cursor: pointer;
            transition: all 0.3s;
        }
        
        .btn:hover {
            background-color: #2563eb;
            transform: translateY(-2px);
        }
        
        /* SECTION UMUM */
        .container {
            max-width: 1000px;
            margin: 0 auto;
            padding: 40px 20px;
        }
        
        h2 {
            color: #1e293b;
            margin-bottom: 20px;
            text-align: center;
        }
        
        .card-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
            gap: 25px;
            margin-top: 30px;
        }
        
        .card {
            background: white;
            border-radius: 16px;
            padding: 25px;
            text-align: center;
            box-shadow: 0 4px 10px rgba(0,0,0,0.05);
            transition: transform 0.3s;
        }
        
        .card:hover {
            transform: translateY(-5px);
        }
        
        /* Pattern background dengan repeat */
        .pattern-section {
            background-image: url('https://www.transparenttextures.com/patterns/diagonal-stripes-light.png');
            background-repeat: repeat;
            padding: 40px 0;
            margin-top: 40px;
        }
        
        /* Overlay dengan RGBA */
        .feature-box {
            background-color: rgba(59, 130, 246, 0.9);
            color: white;
            padding: 30px;
            border-radius: 16px;
            text-align: center;
        }
        
        .info-box {
            background: #eef2ff;
            padding: 25px;
            border-radius: 16px;
            margin-top: 40px;
        }
        
        .info-box code {
            background: #e2e8f0;
            padding: 2px 6px;
            border-radius: 4px;
            font-family: monospace;
        }
        
        .info-box pre {
            background: #1e1e2e;
            color: #fff;
            padding: 12px;
            border-radius: 8px;
            overflow-x: auto;
            margin: 10px 0;
            font-size: 13px;
        }
        
        footer {
            background: #1e293b;
            color: #94a3b8;
            text-align: center;
            padding: 30px;
            margin-top: 40px;
        }
    </style>
</head>
<body>

    <section class="hero">
        <div class="hero-content">
            <h1>Menguasai Background CSS</h1>
            <p>Warna, Gambar, Gradien, dan Pola untuk Website yang Menarik</p>
            <button class="btn">Pelajari Sekarang</button>
        </div>
    </section>

    <div class="container">
        <h2>Fitur Unggulan</h2>
        <div class="card-grid">
            <div class="card">
                <h3>🎨 background-color</h3>
                <p>Warna latar belakang dengan berbagai format (HEX, RGB, HSL, RGBA)</p>
            </div>
            <div class="card">
                <h3>🖼️ background-image</h3>
                <p>Gambar latar belakang untuk membuat website lebih hidup</p>
            </div>
            <div class="card">
                <h3>🔄 background-repeat</h3>
                <p>Mengatur pola pengulangan gambar (repeat, repeat-x, repeat-y, no-repeat)</p>
            </div>
            <div class="card">
                <h3>📍 background-position</h3>
                <p>Mengatur posisi gambar latar (center, top, bottom, left, right)</p>
            </div>
            <div class="card">
                <h3>📏 background-size</h3>
                <p>Mengatur ukuran gambar (cover, contain, atau ukuran spesifik)</p>
            </div>
            <div class="card">
                <h3>⚡ Shorthand</h3>
                <p>Gabungkan semua properti background dalam satu baris kode</p>
            </div>
        </div>
    </div>

    <div class="pattern-section">
        <div class="container">
            <div class="feature-box">
                <h2>Background Pattern dengan repeat</h2>
                <p>Bagian ini memiliki background pattern dari gambar kecil yang diulang (repeat). Cocok untuk membuat tekstur menarik pada website.</p>
            </div>
        </div>
    </div>

    <div class="container">
        <div class="info-box">
            <h3>Properti Background yang Digunakan di Halaman Ini:</h3>
            <ul>
                <li><code>background-image: linear-gradient(...), url(...)</code> → gradien overlay + gambar di hero section</li>
                <li><code>background-size: cover</code> → gambar memenuhi seluruh area hero</li>
                <li><code>background-position: center center</code> → gambar terpusat</li>
                <li><code>background-image: url(...)</code> + <code>background-repeat: repeat</code> → pattern di section pattern</li>
                <li><code>background-color: rgba(59,130,246,0.9)</code> → overlay biru transparan</li>
            </ul>
            
            <h3 style="margin-top: 20px;">Ringkasan Properti Background:</h3>
            <ul>
                <li><code>background-color</code> → warna latar</li>
                <li><code>background-image</code> → gambar latar</li>
                <li><code>background-repeat</code> → pengulangan gambar (repeat, repeat-x, repeat-y, no-repeat)</li>
                <li><code>background-position</code> → posisi gambar (center, top, bottom, left, right)</li>
                <li><code>background-size</code> → ukuran gambar (cover, contain, auto)</li>
                <li><code>background</code> (shorthand) → gabungan semua properti</li>
            </ul>
        </div>
    </div>

    <footer>
        <p>© 2024 - Belajar Background CSS | Dibuat dengan properti background lengkap</p>
    </footer>

</body>
</html>

Hasil visual hero section:

Menguasai Background CSS

Warna, Gambar, Gradien, dan Pola

Properti Background yang Digunakan: background-image (gradien + gambar), background-size: cover, background-position: center

Tabel Ringkasan Properti Background

Properti Fungsi Contoh Nilai
background-color Warna latar belakang red, #3b82f6, rgb(59,130,246)
background-image Gambar latar belakang url('gambar.jpg')
background-repeat Pengulangan gambar repeat, repeat-x, repeat-y, no-repeat
background-position Posisi gambar latar center center, top left, 50% 50%, 20px 30px
background-size Ukuran gambar latar cover, contain, 100px 200px, 50%

Kesalahan Umum Pemula

  • Lupa tanda kutip pada url() → url(gambar.jpg) (boleh tapi tidak disarankan) vs url('gambar.jpg') (disarankan).
  • Lupa memberikan fallback color → Selalu beri warna background cadangan untuk jaga-jaga jika gambar gagal dimuat.
  • Teks tidak terbaca karena background terlalu ramai → Gunakan overlay gradien atau text-shadow untuk meningkatkan kontras.
  • Gambar terlalu besar sehingga loading lambat → Kompres gambar dan gunakan ukuran yang sesuai.
  • Lupa urutan pada shorthand background → Urutan: color image repeat position / size.
Debugging Tips:
  • Buka Developer Tools (F12) → tab Network → cek apakah gambar background berhasil dimuat (status 200)
  • Jika gambar tidak muncul, cek path URL (apakah relatif atau absolut, dan apakah file ada)
  • Gunakan background-color sebagai fallback untuk memastikan ada warna jika gambar gagal

Latihan Singkat

  1. Buat div dengan background-color biru, padding 20px, border-radius 10px
  2. Buat hero section dengan background-image, background-size: cover, background-position: center
  3. Buat pola berulang (pattern) menggunakan background-repeat: repeat dengan gambar kecil
  4. Buat elemen dengan background-image dan background-position: right bottom, no-repeat
  5. Buat overlay transparan dengan RGBA di atas background image
  6. Simpan dan buka di browser, amati hasilnya

Intisari Hari Ini

  • background-color → warna latar belakang
  • background-image → gambar latar belakang
  • background-repeat → mengatur pengulangan gambar (repeat, repeat-x, repeat-y, no-repeat)
  • background-position → mengatur posisi gambar (center, top, bottom, left, right, atau pixel/persen)
  • background-size → mengatur ukuran gambar (cover, contain, atau ukuran spesifik)
  • Shorthand background → gabungan semua properti dalam satu baris
  • Selalu beri fallback color untuk jaga-jaga jika gambar gagal dimuat
Tantangan: Buat sebuah Landing Page Produk dengan berbagai efek background! Persyaratan:
  • Hero section dengan background image + overlay gradien (linear-gradient) dan teks di atasnya
  • Section "Fitur" dengan background pattern (ulangi gambar kecil menggunakan repeat)
  • Section "Testimoni" dengan background color solid dan efek shadow
  • Section "CTA" dengan background image + background-size: cover + background-attachment: fixed (efek paralaks sederhana)
  • Setiap kartu produk memiliki background warna putih dengan shadow
  • Footer dengan background color gelap
  • Tambahkan kotak penjelasan yang mendokumentasikan semua properti background yang digunakan

Selamat mencoba!

Artikel Sebelumnya: CSS Dasar #10 - Warna di CSS: Named Colors, HEX, RGB, RGBA, HSL, HSLA
Artikel Selanjutnya: CSS Dasar #12 - Gradient: Linear Gradient dan Radial Gradient

Tags

Anda mungkin menyukai postingan ini

Lebih baru Lebih lama

نموذج الاتصال