Beranda
CSS

Menggunakan Background di CSS

Menggunakan background di CSS bisa membuat tampilan website kalian jadi lebih hidup dan menarik. Mulai dari warna solid, gambar, hingga gradasi
Kode Violet
Menggunakan Background di CSS

Hai teman-teman! Pernah nggak sih kalian ingin bikin tampilan website jadi lebih menarik dengan menambahkan gambar atau warna latar belakang? Nah, di kesempatan ini kodeviolet.com akan membahas tentang Menggunakan Background di CSS agar halaman web kalian tampil lebih keren dan hidup.

Apa Itu Background di CSS?

Background di CSS adalah properti yang digunakan untuk mengatur latar belakang suatu elemen. Kalian bisa memberi warna, gambar, atau bahkan membuat gradasi warna sebagai background.

Jenis Properti Background di CSS

Ada beberapa properti yang bisa kalian gunakan untuk mengatur background, antara lain:

Properti CSS Fungsi Utama Contoh Kode
background-color Mengatur warna latar belakang background-color: lightblue;
background-image Menambahkan gambar sebagai latar belakang background-image: url('gambar.jpg');
background-repeat Mengatur apakah gambar diulang atau tidak background-repeat: no-repeat;
background-position Menentukan posisi gambar latar background-position: center top;
background-size Mengatur ukuran gambar latar background-size: cover;
background-attachment Menentukan apakah latar bergulir bersama halaman atau tidak background-attachment: fixed;
background Shorthand untuk semua properti background di atas background: url('gambar.jpg') no-repeat center/cover;

Contoh Penggunaan Background

Yuk kita lihat contoh lengkap HTML dan CSS untuk menggunakan background:

<!DOCTYPE html>
<html lang="id">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Menggunakan Background di CSS</title>
  <style>
    body {
      background-color: #f0f8ff;
    }

    .bg-gambar {
      background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiRTSba5ugtraL3A2W5jEsl0tNefBjx4iotzq8eWbhrEAxP8sEHTlYR_J8dViTM2BfT-x2CnSk-WMYp7jm_tpF6a8NNP7jQnrNnLRwqzkyLMStS7oyj9qpDZcSELhBknEh6IUgjbepLYkgGe0kpz1ZEgnpMHicuVCvYgFTlz-N19Ss6pRrm3tgSYa7s/s16000-rw/Cara%');
      background-size: cover;
      background-repeat: no-repeat;
      background-position: center;
      height: 400px;
      display: flex;
      align-items: center;
      justify-content: center;
      color: white;
      font-size: 2em;
      text-shadow: 1px 1px 2px #000;
    }
  </style>
</head>
<body>
  <div class="bg-gambar">
    Ini adalah latar belakang dengan gambar!
  </div>
</body>
</html>

Kalian bisa mengganti URL gambar dengan gambar favorit kalian sendiri. Pastikan ukuran dan posisinya juga kalian sesuaikan supaya tampilannya maksimal.

Tips Tambahan

  • Gunakan gambar berukuran ringan agar tidak membuat loading halaman jadi lambat.
  • Gunakan background-size: cover untuk tampilan full screen yang rapi.
  • Kombinasikan dengan gradasi warna menggunakan linear-gradient jika ingin efek lebih kreatif.

Kesimpulan

Menggunakan background di CSS bisa membuat tampilan website kalian jadi lebih hidup dan menarik. Mulai dari warna solid, gambar, hingga gradasi, semua bisa dikustomisasi sesuai kebutuhan.

Itulah tadi artikel dari kodeviolet.com tentang Menggunakan Background di CSS, semoga bermanfaat dan jangan ragu untuk bereksperimen ya!

Posting Komentar