CSS Backgrounds: Panduan Lengkap Styling Background

Hai kawan Maya! Background adalah salah satu elemen paling penting dalam web design. Tanpa background yang menarik, website bisa terlihat membosankan. Untungnya, CSS punya banyak sekali properti untuk styling background!

Di artikel ini, kita akan belajar semua tentang CSS backgrounds – dari warna solid sampai gambar dengan efek parallax. Let’s go!

CSS Background Properties

CSS menyediakan beberapa properti untuk mengontrol background:

background-color – Warna background
background-image – Gambar background
background-repeat – Pengulangan gambar
background-position – Posisi gambar
background-size – Ukuran gambar
background-attachment – Fixed atau scroll
background – Shorthand untuk semua property

Mari kita bahas satu per satu!

1. Background Color

Property paling simple untuk styling background adalah background-color.

body {
    background-color: #f4f4f4;
}

.header {
    background-color: #3498db;
}

.card {
    background-color: rgba(255, 255, 255, 0.9);
}

.gradient-box {
    background-color: lightblue;
}

Semua Format Warna Bisa Dipakai

/* Color names */
background-color: tomato;

/* HEX */
background-color: #e74c3c;

/* RGB */
background-color: rgb(231, 76, 60);

/* RGBA dengan transparency */
background-color: rgba(231, 76, 60, 0.5);

/* HSL */
background-color: hsl(6, 78%, 57%);

2. Background Image

Gunakan background-image untuk set gambar sebagai background.

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

.pattern {
    background-image: url('../images/pattern.png');
}

/* Multiple backgrounds */
.layered {
    background-image: 
        url('overlay.png'),
        url('background.jpg');
}

Path ke Gambar

/* Same folder */
background-image: url('image.jpg');

/* Subfolder */
background-image: url('images/bg.jpg');

/* Parent folder */
background-image: url('../bg.jpg');

/* Absolute URL */
background-image: url('https://example.com/image.jpg');

3. Background Repeat

By default, gambar background akan repeat (diulang). Gunakan background-repeat untuk mengontrolnya.

/* Default - repeat both x and y */
.default {
    background-image: url('pattern.png');
    background-repeat: repeat;
}

/* No repeat */
.hero {
    background-image: url('hero.jpg');
    background-repeat: no-repeat;
}

/* Repeat horizontal only */
.header {
    background-image: url('stripe.png');
    background-repeat: repeat-x;
}

/* Repeat vertical only */
.sidebar {
    background-image: url('texture.png');
    background-repeat: repeat-y;
}

Advanced Values

/* Space - repeat dengan spacing */
background-repeat: space;

/* Round - repeat dan stretch agar fit */
background-repeat: round;

4. Background Position

Kontrol di mana gambar ditempatkan dengan background-position.

Keyword Values

/* Keywords */
background-position: center;
background-position: top;
background-position: bottom;
background-position: left;
background-position: right;

/* Combined keywords */
background-position: top left;
background-position: center center;
background-position: bottom right;

Pixel Values

/* X and Y axis in pixels */
background-position: 20px 50px;

/* 20px from left, 50px from top */

Percentage Values

/* Percentages */
background-position: 50% 50%;  /* Center */
background-position: 0% 0%;    /* Top left */
background-position: 100% 100%; /* Bottom right */

Contoh Praktis

.hero {
    background-image: url('landscape.jpg');
    background-repeat: no-repeat;
    background-position: center center;
}

.logo-bg {
    background-image: url('logo.png');
    background-repeat: no-repeat;
    background-position: top right;
}

5. Background Size

Property background-size mengontrol ukuran gambar background.

Keyword Values

/* Cover - menutupi seluruh area */
.hero {
    background-image: url('hero.jpg');
    background-size: cover;
    background-position: center;
}

/* Contain - fit di dalam tanpa crop */
.gallery {
    background-image: url('artwork.jpg');
    background-size: contain;
    background-repeat: no-repeat;
}

/* Auto - ukuran asli */
.pattern {
    background-size: auto;
}

Specific Sizes

/* Width and height */
background-size: 200px 150px;

/* Width only (height auto) */
background-size: 100%;

/* Percentages */
background-size: 50% 50%;

Cover vs Contain – Apa Bedanya?

Cover:

Menutupi seluruh container
Gambar bisa terpotong (cropped)
No white space
Maintain aspect ratio

.cover-example {
    width: 400px;
    height: 300px;
    background-image: url('photo.jpg');
    background-size: cover;
    background-position: center;
}

Contain:

Fit semua gambar dalam container
Tidak ada cropping
Mungkin ada white space
Maintain aspect ratio

.contain-example {
    width: 400px;
    height: 300px;
    background-image: url('photo.jpg');
    background-size: contain;
    background-repeat: no-repeat;
}

6. Background Attachment

Kontrol apakah background scroll atau fixed.

/* Default - scroll dengan page */
.normal {
    background-image: url('bg.jpg');
    background-attachment: scroll;
}

/* Fixed - tetap di tempat (parallax effect) */
.parallax {
    background-image: url('mountain.jpg');
    background-attachment: fixed;
    background-position: center;
    background-size: cover;
}

Parallax Effect Example

.parallax-section {
    min-height: 500px;
    background-image: url('parallax-bg.jpg');
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

7. Background Shorthand

Semua property bisa digabung jadi satu dengan background shorthand!

Syntax

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

Contoh Lengkap

/* Long way */
.hero {
    background-color: #333;
    background-image: url('hero.jpg');
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
}

/* Shorthand - SAME RESULT! */
.hero {
    background: #333 url('hero.jpg') no-repeat center center / cover;
}

More Examples

/* Simple */
background: lightblue;

/* Color + image */
background: #fff url('pattern.png');

/* Complete setup */
background: 
    url('hero.jpg') 
    no-repeat 
    center center / cover 
    fixed;

Multiple Backgrounds

CSS bisa pakai multiple background images sekaligus!

.layered-bg {
    background-image: 
        url('overlay.png'),
        url('texture.png'),
        url('background.jpg');
    
    background-position:
        center,
        top left,
        center;
    
    background-repeat:
        no-repeat,
        repeat,
        no-repeat;
    
    background-size:
        cover,
        auto,
        cover;
}

Order: Gambar pertama = top layer (paling depan)

Linear Gradients

Gradient adalah transisi smooth antar warna. Super populer di web design modern!

/* Simple gradient */
.gradient-1 {
    background: linear-gradient(to right, #3498db, #2ecc71);
}

/* Vertical gradient */
.gradient-2 {
    background: linear-gradient(to bottom, #e74c3c, #c0392b);
}

/* Diagonal gradient */
.gradient-3 {
    background: linear-gradient(45deg, #667eea, #764ba2);
}

/* Multiple color stops */
.gradient-4 {
    background: linear-gradient(
        to right,
        #3498db 0%,
        #2ecc71 50%,
        #e74c3c 100%
    );
}

Radial Gradients

Gradient dari center ke luar.

/* Basic radial */
.radial-1 {
    background: radial-gradient(circle, #3498db, #2c3e50);
}

/* Positioned radial */
.radial-2 {
    background: radial-gradient(
        circle at top left,
        #e74c3c,
        #c0392b
    );
}

Praktis: Hero Section

Contoh lengkap hero section dengan background image:

.hero-section {
    /* Size */
    min-height: 600px;
    
    /* Background setup */
    background-image: 
        linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)),
        url('hero-background.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: fixed;
    
    /* Content styling */
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: white;
}

Trick: Layer gradient di atas image untuk darkening effect!

Praktis: Card dengan Pattern

.card {
    background-color: white;
    background-image: url('subtle-pattern.png');
    background-repeat: repeat;
    background-size: 200px;
    padding: 30px;
    border-radius: 8px;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
}

Background Clip & Origin

Advanced properties untuk kontrol lebih detail.

Background Clip

Mengontrol area mana yang di-cover background.

/* Extend ke border */
.box {
    background-clip: border-box; /* Default */
}

/* Hanya padding area */
.box {
    background-clip: padding-box;
}

/* Hanya content area */
.box {
    background-clip: content-box;
}

Background Origin

Mengontrol starting position background.

.box {
    background-origin: padding-box; /* Default */
    background-origin: border-box;
    background-origin: content-box;
}

Responsive Backgrounds

Background yang responsive untuk berbagai device:

.hero {
    background: url('hero-mobile.jpg') center/cover;
}

@media (min-width: 768px) {
    .hero {
        background-image: url('hero-tablet.jpg');
    }
}

@media (min-width: 1024px) {
    .hero {
        background-image: url('hero-desktop.jpg');
    }
}

Tips & Best Practices

1. Optimize Images

/* ✅ GOOD - optimized image */
background-image: url('hero-optimized.jpg'); /* 200KB */

/* ❌ BAD - huge file */
background-image: url('hero-original.jpg'); /* 5MB */

Tool: TinyPNG, ImageOptim, atau Squoosh

2. Always Set Fallback Color

.hero {
    /* Fallback color jika gambar gagal load */
    background-color: #2c3e50;
    background-image: url('hero.jpg');
}

3. Use background-size: cover untuk Hero

.hero {
    background: url('hero.jpg') center/cover no-repeat;
    min-height: 100vh;
}

4. Combine dengan Overlay

.hero {
    background: 
        linear-gradient(rgba(0,0,0,0.4), rgba(0,0,0,0.4)),
        url('hero.jpg') center/cover;
}

5. Test di Berbagai Screen

Pastikan background terlihat bagus di mobile, tablet, dan desktop!

Common Patterns

Full-Page Background

body {
    background: url('bg.jpg') no-repeat center center fixed;
    background-size: cover;
}

Textured Background

.section {
    background-color: #f5f5f5;
    background-image: url('texture.png');
    background-repeat: repeat;
}

Gradient Button

.btn {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    padding: 12px 30px;
    border: none;
    border-radius: 5px;
}

.btn:hover {
    background: linear-gradient(135deg, #764ba2 0%, #667eea 100%);
}

Kesimpulan

CSS Backgrounds sangat powerful! Key points:

background-color untuk warna solid
background-image untuk gambar
background-repeat kontrol pengulangan
background-position atur posisi
background-size (cover/contain) untuk sizing
background-attachment untuk parallax effect
background shorthand untuk efisiensi
Gradients untuk efek modern
Multiple backgrounds untuk layering

Dengan menguasai background properties ini, kawan Maya bisa create website yang visually stunning!

Ditulis oleh: Maya

Maya adalah tokoh hayalan, hanya tampaknya ada, tetapi nyatanya tidak ada, tokoh Maya dibangun untuk lebih mendekatkan karyamaya pada kalian.

Semua tulisan Maya | Website

CSS Background Properties

1. Background Color

Semua Format Warna Bisa Dipakai

2. Background Image

Path ke Gambar

3. Background Repeat

Advanced Values

4. Background Position

Keyword Values

Pixel Values

Percentage Values

Contoh Praktis

5. Background Size

Keyword Values

Specific Sizes

Cover vs Contain – Apa Bedanya?

6. Background Attachment

Parallax Effect Example

7. Background Shorthand

Syntax

Contoh Lengkap

More Examples

Multiple Backgrounds

Linear Gradients

Radial Gradients

Praktis: Hero Section

Praktis: Card dengan Pattern

Background Clip & Origin

Background Clip

Background Origin

Responsive Backgrounds

Tips & Best Practices

1. Optimize Images

2. Always Set Fallback Color

3. Use background-size: cover untuk Hero

4. Combine dengan Overlay

5. Test di Berbagai Screen

Common Patterns

Full-Page Background

Textured Background

Gradient Button

Kesimpulan

Warna, Tata Letak, dan Dekorasi Teks CSS

CSS Outline Mastery: Kuasai `outline-width`, `outline-color`, Shorthand, dan `outline-offset` dalam 1 Jam!

Kuasai Box Model CSS dalam 60 Menit: Panduan Visual untuk Layout Web Responsif

Panduan CSS Height, Width, dan Max-Width untuk Pemula

Apa Itu Margin dalam CSS?

CSS Margins: Panduan Lengkap Spacing di Luar Element

ads by Google