Mengatur background di HTML adalah salah satu cara termudah untuk membuat halaman web kalian lebih menarik dan responsif. Background dapat berupa warna solid, gambar, atau bahkan gradien. Berikut adalah beberapa cara untuk mengubah background pada HTML menggunakan tag HTML atau CSS.

1. Mengubah Background dengan Warna Solid

Untuk mengubah background menjadi warna solid, kalian bisa menambahkan atribut style langsung pada tag <body> atau menggunakan CSS eksternal.

Contoh 1 – Inline CSS pada Tag <body>

<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Background Warna Solid</title>
</head>
<body style="background-color: lightblue;">
    <h1>Selamat Datang!</h1>
    <p>Ini adalah contoh background dengan warna solid.</p>
</body>
</html>

Contoh 2 – Menggunakan CSS Eksternal

<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Background Warna Solid</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <h1>Selamat Datang!</h1>
    <p>Ini adalah contoh background dengan warna solid.</p>
</body>
</html>
/* styles.css */
body {
    background-color: lightblue;
}

2. Mengubah Background dengan Gambar

Untuk mengatur background dengan gambar, kalian bisa menggunakan properti CSS background-image. Berikut cara menambahkannya:

Contoh – Gambar Background dengan CSS

<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Background Gambar</title>
    <style>
        body {
            background-image: url('background.jpg');
            background-size: cover;
            background-repeat: no-repeat;
        }
    </style>
</head>
<body>
    <h1>Selamat Datang!</h1>
    <p>Ini adalah contoh background dengan gambar.</p>
</body>
</html>

Pada contoh ini:

  • background-image menambahkan gambar sebagai background.
  • background-size: cover membuat gambar menutupi seluruh layar.
  • background-repeat: no-repeat menghindari gambar berulang jika layarnya besar.

3. Mengubah Background dengan Gradien

Gradien dapat memberikan efek lebih modern dan menarik. CSS menawarkan dua jenis gradien: linear dan radial.

Contoh – Background Gradien Linear

<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Background Gradien</title>
    <style>
        body {
            background: linear-gradient(to right, #ff7e5f, #feb47b);
        }
    </style>
</head>
<body>
    <h1>Selamat Datang!</h1>
    <p>Ini adalah contoh background dengan gradien linear.</p>
</body>
</html>

Contoh – Background Gradien Radial

<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Background Gradien Radial</title>
    <style>
        body {
            background: radial-gradient(circle, #ff7e5f, #feb47b);
        }
    </style>
</head>
<body>
    <h1>Selamat Datang!</h1>
    <p>Ini adalah contoh background dengan gradien radial.</p>
</body>
</html>

4. Menggabungkan Background Warna dan Gambar

Jika ingin menggunakan warna dan gambar sekaligus, kalian bisa menggabungkannya. Gambar akan berada di atas warna.

Contoh – Background dengan Warna dan Gambar

<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Background Warna dan Gambar</title>
    <style>
        body {
            background-color: lightblue;
            background-image: url('pattern.png');
            background-repeat: repeat;
        }
    </style>
</head>
<body>
    <h1>Selamat Datang!</h1>
    <p>Ini adalah contoh background dengan warna dan gambar.</p>
</body>
</html>

Tabel Ringkasan

MetodeKeterangan
Warna SolidMenggunakan background-color untuk memberi warna solid pada background.
GambarMenggunakan background-image dengan properti background-size dan background-repeat.
Gradien LinearMenggunakan linear-gradient() untuk menciptakan gradasi warna dari satu sisi ke sisi lainnya.
Gradien RadialMenggunakan radial-gradient() untuk menciptakan gradasi warna berbentuk lingkaran.
Warna & GambarMenggabungkan background-color dan background-image secara bersamaan.

Berikut adalah contoh HTML untuk tampilan post website dengan background animasi partikel. Dalam contoh ini, kita akan menggunakan animasi partikel sederhana dengan CSS dan JavaScript:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Post Website dengan Background Animasi Partikel Estetik</title>
    <style>
        /* Styling dasar untuk tampilan */
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: Arial, sans-serif;
        }

        body, html {
            width: 100%;
            height: 100%;
            overflow: hidden;
            background: #1d1f27;
            color: #fff;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        /* Kontainer untuk post */
        .post-container {
            position: relative;
            max-width: 600px;
            padding: 40px;
            background: rgba(0, 0, 0, 0.8);
            border-radius: 10px;
            z-index: 1;
        }

        /* Judul dan konten post */
        .post-title {
            font-size: 2em;
            margin-bottom: 10px;
            color: #ff6b6b;
        }

        .post-content {
            font-size: 1em;
            line-height: 1.6;
            color: #d1d1d1;
        }

        /* Style partikel */
        .particles {
            position: absolute;
            width: 100%;
            height: 100%;
            top: 0;
            left: 0;
            overflow: hidden;
            z-index: 0;
            pointer-events: none;
        }

        .particle {
            position: absolute;
            background: rgba(255, 255, 255, 0.8);
            border-radius: 50%;
            opacity: 0.5;
            animation: floatUp 10s linear infinite;
        }

        /* Animasi partikel dengan variasi ukuran dan durasi */
        @keyframes floatUp {
            0% {
                transform: translateY(100vh) translateX(0);
                opacity: 0.8;
            }
            100% {
                transform: translateY(-100vh) translateX(calc(30vw * (var(--direction))));
                opacity: 0;
            }
        }
    </style>
</head>
<body>

    <!-- Background Partikel -->
    <div class="particles"></div>

    <!-- Konten Post -->
    <div class="post-container">
        <h1 class="post-title">Judul Post yang Estetik</h1>
        <p class="post-content">
            Ini adalah contoh konten postingan untuk website dengan background animasi partikel yang lebih estetik. 
            Konten ini dapat dijadikan template untuk tampilan blog atau artikel yang menarik perhatian pengguna.
        </p>
    </div>

    <!-- JavaScript untuk menambahkan partikel -->
    <script>
        const particlesContainer = document.querySelector('.particles');

        // Fungsi untuk membuat partikel dengan variasi
        function createParticle() {
            const particle = document.createElement('div');
            particle.classList.add('particle');
            
            // Ukuran acak partikel
            const size = Math.random() * 10 + 3; // Ukuran antara 3px hingga 13px
            particle.style.width = `${size}px`;
            particle.style.height = `${size}px`;

            // Posisi dan arah acak
            particle.style.left = Math.random() * 100 + 'vw';
            particle.style.animationDuration = Math.random() * 5 + 8 + 's';
            particle.style.setProperty('--direction', Math.random() > 0.5 ? 1 : -1);

            // Tambahkan partikel ke container
            particlesContainer.appendChild(particle);

            // Hapus partikel setelah animasi selesai
            setTimeout(() => {
                particle.remove();
            }, 13000); // Sedikit lebih lama dari durasi animasi
        }

        // Buat beberapa partikel secara berkala
        setInterval(createParticle, 150);
    </script>
</body>
</html>
Demo

Dengan langkah-langkah di atas, kalian bisa bereksperimen untuk membuat desain background yang menarik di halaman web kalian. Selamat mencoba!

Categorized in:

HTML,

Last Update: Januari 28, 2025