author Ahmad Muhardian

Tutorial CSS: Menggunakan Background di CSS

Tutorial CSS Background

Setelah kita belajar tentang properti color dan nilai-nilai warna yang valid di CSS, berikutnya kita pelajari tentang background.

Seperti namanya, properti background fungsinya untuk memberikan background pada elemen tertentu.

Jika kamu coba ketik background pada kode CSS di Inspect Elemen, maka akan muncul beberapa saran properti yang berkaitan dengan background.

properti background di inspect element

Masing-masing properti background- punya fungsi yang berbeda-beda.

Ada dua cara kita memberikan background di CSS, yakni dengan warna dan gambar. Pemberian background dengan gambar membutuhkan beberapa properti tambahan lagi untuk mengatur gambarnya.

Itu sebabnya ada banyak properti background-* si CSS.

Pada tutorial ini, kita akan membahas properti-properti yang penting dan sering digunakan dalam membuat background.

Mari kita mulai..

Background Warna

Untuk memberikan background warna, kita bisa memberikan nilai warna pada properti background seperti nama warna, kode heksadesimal warna, fungsi rgb(), rgba(), hsl(), dan sebagainya.

Mari kita langsung coba praktik.

Buatlah file baru dengan nama contoh-bg-warna.html, kemudian isi kodenya seperti ini:

<html>
  <head>
    <title>Contoh Background Warna</title>
    <meta content="">
    <style>
      header {
        background-color: violet;
      }
    </style>
  </head>
  <body>
    <header>
      <h1>Belajar Background di CSS</h1>
    </header>
  </body>
</html>

Maka hasilnya:

contoh background color

Elemen <header> berhasil kita set warna latarnya menjadi violet.

Oya, kita menggunakan properti background-color untuk memberikan warna latar. Sebenarnya bisa juga dengan properti background saja.

Nilai yang kita berikan pada background-color berupa nama warna. Silakan coba juga gunakan nilai warna yang lain seperti kode heksa, fungsi rgb(), hsl(), dan sebagainya.

Contoh menggunakan kode heksa:

contoh background dengan warna heksa

Nilai warna sudah kita pelajari di materi sebelumnya:

Oke, selanjutnya kita akan coba menggunakan background dengan warna gradasi.

Pertama kita buat dulu warna gradasinya di website: https://cssgradient.io/

Kemudian copy kode CSS gradient yang kamu dapatkan.

cssgradient

..dan ubah kode CSS contoh yang tadi menjadi seperti ini:

<html>
  <head>
    <title>Contoh Background Warna</title>
    <meta content="">
    <style>
      header {
        background: rgb(34,193,195);
        background: linear-gradient(90deg, rgba(34,193,195,1) 0%, rgba(240,45,253,1) 100%);
      }
    </style>
  </head>
  <body>
    <header>
      <h1>Belajar Background di CSS</h1>
    </header>
  </body>
</html>

Maka hasilnya:

contoh background gradasi

Mantap 👍, sekarang background-nya pakai warna gradasi.

Oya, mengapa kita menggunakan dua properti background?

background: rgb(34,193,195);
background: linear-gradient(90deg, rgba(34,193,195,1) 0%, rgba(240,45,253,1) 100%);

Ini untuk antisipasi, jika browser tidak mendukung menggunakan warna gradasi, maka warna background yang dipakai adalah warna dari fungsi rgb().

Background Image

Jika ingin menggunakan warna latar gambar, maka kita bisa menggunakan properti background-image atau background saja.

Format gambar yang didukung bisa: jpg, png, gif, webp, avif, svg, dll.

Intinya, selama format gambar tersebut bisa dibuka di web browser, maka bisa dipakai sebagai background.

Oke, kalau begitu..

Mari kita coba latihan menggunakan background gambar.

Pertama silakan download file gambarnya di Unsplash:

Download yang ukuran medium.

download medium

Sebenarnya bisa pakai yang mana aja. Tapi kita coba ukuran medium, karena bisanya ukuran layar komputer dan Hp segitu.

Setelah kamu download, ubah namanya menjadi background.jpg kemudian taruh di satu folder dengan file HTML-nya.

struktur folder file background

Jika file background.jpg tidak berada di satu folder dengan File HTML, maka nanti kamu bisa tulis alamat path-nya di CSS.

Setelah itu, buat file HTML baru dengan nama contoh-bg-image.html dengan isi sebagai berikut.

<html>
  <head>
    <title>Contoh Background Warna</title>
    <meta content="">
    <style>

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

      header {
        background: rgba(255,255,225, 0.5);
      }
    </style>
  </head>
  <body>
    <header>
      <h1>Belajar Background di CSS</h1>
    </header>
  </body>
</html>

Pada kode ini, kita memberikan background gambar untuk elemen <body> dan memberikan background putih transparan (50%) untuk elemen <header>.

Maka hasilnya:

contoh bg image

Coba perbesar dan perkecil ukuran jendelanya.. atau coba juga melakukan zoom out.

Background Repeat

Jika kita melakukan zoom out pada contoh yang tadi, maka hasilnya akan seperti ini:

hasil zoom out

Gambar background-nya akan diulang-ulang. Jika kamu pakai ukuran gambar yang kecil, maka akan ditampilkan seperti itu.

Gimana cara agar tidak diulang-ulang?

Kita bisa gunakan properti background-repeat. Properti ini punya beberapa nilai:

  • repeat-x artinya mengulang background pada sumbu x aja;
  • repeat-y artinya mengulang background pada sumbu y aja;
  • no-repeat artinya tidak mengulang background.

Nah, kita bisa pakai no-repeat bila ingin background-nya tidak diulang.

Maka kode CSS-nya akan menjadi seperti ini:

body {
	background-image: url('background.jpg');
	background-repeat: no-repeat;
}

Maka hasilnya:

Background tidak akan diulang.

background no repeat

Menentukan Ukuran Background

Kita bisa mengatur ukuran background dengan properti background-size, properti ini punya beberapa nilai yang valid:

  • px, pt, em, rem (fixed) ukuran dalam angka dan satuan, contoh 200px, 20em.
  • vw, vh (dynamic) mengikuti ukuran tinggi dan lebar layar (view port);
  • contain (dynamic) mengikuti ukuran lebar elemen;
  • cover (dynamic) mengikuti ukuran lebar dan tinggi elemen;

Mari kita coba contohnya.

Ubahlah kode CSS background pada contoh sebelumnya menjadi seperti ini:

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

Maka hasilnya:

Menggunakan Gambar SVG

Gambar SVG (Scalable Vector Graphic) merupakan format gambar vektor yang menjadi standar di web saat ini.

Tidak seperti gambar bitmap (jpg, png, gif) yang ukurannya dibatasi dengan piksel. Vektor bisa kita perbesar ukurannya berapapun yang kita mau, tanpa merusak kualitasnya.

Nah, untuk latihan.. kita akan menggunakan gambar vektor dari getwave.io.

Silakan buat gambar vektor wave di sana, kemudian download file SVG-nya.

getwave

Kemudian taruh di satu folder dengan HTML-nya.

file vektor dan html

Setelah itu, buat file HTML baru dengan nama contoh-bg-svg.html dan isi kodenya seperti ini:

<html>
  <head>
    <title>Contoh Background SVG</title>
    <meta content="">
    <style>

      body {
        background-image: url('wave.svg');
        background-repeat: no-repeat;
      }

      header {
        background: rgba(255,255,225, 0.5);
      }
    </style>
  </head>
  <body>
    <header>
      <h1>Belajar Background di CSS</h1>
    </header>
  </body>
</html>

Pada kode ini, kita tidak perlu menentukan ukuran background untuk file vektor. Ukuran yang dipakai adalah ukuran maksimal 100%. Tapi kamu juga bisa menentukan ukurannya, jika mau.

Oke, sekarang coba buka di web browser.

Maka hasilnya:

contoh bg svg

Woaw.. keren 😍.

Background Blur di CSS

Belakangan ini banyak konsep desain web dengan background blur. Konsep ini dikenal dengan glass morphology design, karena bentuknya mirip seperti glass.

Nah untuk membuat yang seperti ini, ada properti css baru bernama backdrop-filter untuk memberikan filter pada background.

Jika ingin memberikan filter blur, maka kita harus memberikan nilai dengan fungsi blur().

Contoh:

Buatlah file baru dengan nama contoh-bg-blur.html kemudian, isi dengan kode berikut.

<html>
  <head>
    <title>Contoh Background Blur</title>
    <meta content="">
    <style>

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

      header {
        background: rgba(255,255,225, 0.5);
      }

      article {
        background-color: rgba(255, 255, 255, 0.5);
        backdrop-filter: blur(10px);
        padding: 1rem;
      }
    </style>
  </head>
  <body>
    <header>
      <h1>Belajar Background di CSS</h1>
    </header>
    <article>
      Lorem ipsum, dolor sit amet consectetur adipisicing elit. Odit iusto quidem magnam distinctio accusamus obcaecati quis assumenda architecto nesciunt facere, ducimus et quo animi itaque voluptas ipsum. Esse, debitis earum.
    </article>
  </body>
</html>

Pada contoh ini, kita memberikan efek filter blur (10px) untuk background elemen <article>.

Maka hasilnya:

contoh hasil background blur

Mantap.. 😍 keren.

Selain efek blur(), masih ada lagi efek lainnya seperti:

  • brightness() untuk efek kecerahan;
  • contrast() untuk efek kontras;
  • drop-shadow() untuk efek bayangan;
  • grayscale() untuk efek hitam putih;
  • hue-rotate() untuk efek warna hue;
  • invert() untuk efek warna negatif;
  • opacity() untuk efek transparan;
  • saturate() untuk efek saturasi warna;
  • sepia() untuk efek warna sepia.

Silakan kamu coba-coba sendiri.

Properti backdrop-filter adalah properti baru yang belum masuk standar resmi CSS. Tidak semua browser mendukung properti ini. Kamu bisa mengeceknya di caniuse.com/css-backdrop-filter.

Apa Selanjutnya?

Oke, biar tutorial ini tidak terlalu panjang.. kita akhiri sampai di sini.

Sebenarnya masih banyak lagi properti yang berkaitan tentang background, terutama dalam menggunakan background gambar.

Namun, yang saya bahas di tutorial ini adalah yang paling sering dipakai saat ini. Sisanya, kamu bisa coba-coba sendiri.

Jika ada yang dibingungkan, tanya aja di komentar!

Selanjutnya silakan pelajari tentang: Teks Formatting di CSS.

Selamat belajar. 🙌

Daftar isi tutorial

  1. Tutorial CSS #01: Pengenalan Dasar CSS untuk Pemula
  2. Tutorial CSS #02: Cara Menulis CSS di HTML
  3. Tutorial CSS #03: Sintaks Dasar CSS yang Harus Kamu Pahami
  4. Tutorial CSS #04: Memahami Selector di CSS
  5. Tutorial CSS #05: Menggunakan Warna di CSS
  6. Tutorial CSS #06: Menggunakan Background di CSS
  7. Tutorial CSS #07: Text Formatting di CSS
  8. Tutorial CSS #08: Menggunakan Font di CSS
  9. Tutorial CSS #09: Menggunakan Garis di CSS (Border)
  10. Tutorial CSS #10: Menentukan ukuran elemen
  11. Tutorial CSS #11: Box Model di CSS
  12. Tutorial CSS #12: Position (Coming soon)
  13. Tutorial CSS #13: Menggunakan Float (Coming soon)
  14. Tutorial CSS3: Cara Menggunakan Bayangan (Shadow)
    15. 🚧 Work in Progress 🚧

    Maaf jika ada link yang belum aktif. Link tersebut masih dalam draft atau sedang dikerjakan. Do'akan agar penulis tetap sehat dan tulisannya cepat terbit 🙏. Kamu juga bisa memberikan dukungan dengan mentrakteer kopi ☕ supaya penulis kuat begadang, hehe.