Pada tutorial kali ini kita akan membahas penerapan properti background pada css, background atau latar belakang adalah sebuah elemen utama untuk menentukan bagaimana sebuah objek ditampilkan agar terlihat menarik dan tidak terlihat monoton.
Secara bawaan background pada dokumen html memiliki warna putih, nah disini kita akan pelajari bagaimana cara penerapan properti background pada css ini untuk berubah background warna bawaan browser tersebut ke bentuk warna atau sebuah gambar.
Penerapan Properti Background Pada CSS
Ada beberapa properti background untuk mengatur atau membuat background agar tampak sesuai dengan yang kita inginkan, mulai dari warna, posisi, sifat dan lainnya. Berikut ini properti-properti yang dimiliki background.
| Properti | Keterangan |
|---|---|
| background | Properti singkat untuk menentukan sebuah background elemen yang mewakili beberapa properti background lainnya dengan pemberian nilai secara bersamaan. |
| background-color | Untuk menentukan warna latar belakang sebuah elemen html. |
| background-image | Untuk menjadi gambar sebagai latar belakang dokumen html atau elemen html. |
| background-repeat | Untuk mengatur kontrol pengulangan pada background gambar. |
| background-position | Untuk mengatur kontrol posisi pada background gambar. |
| background-attachment | Untuk mengatur kontrol scrolling pada background gambar. |
| background-size | Untuk mengatur kontrol ukuran pada background gambar. |
Dari jenis-jenis properti kita akan bahas satu persatu penerapan properti background pada css ini, yang perlu diingat adalah sesuaikan objek pada html yang ingin kita ubah latar belakangnya, jangan sampai warna background dengan warna teks serupa, hal tersebut akan membuat teks tidak dapat terbaca.
Menentukan Warna Background Pada CSS
Jika pada bawaan browser warna background pada dokumen html memiliki warna putih, pada tutorial ini kita akan menentukan warna background pada css tersebut, dalam tutorial ini penulis menggunakan warna kuning dan teks warna hitam.
<!DOCTYPE html>
<html>
  <head>
    <title>Background</title>
    <style type="text/css">
      body {
        background: yellow;
        color: black;
      }
    </style>
  </head>
<body>
  <h1>Mengatur warna latar belakang html</h1>
</body>
</html>Code language: HTML, XML (xml)Berikut ini adalah bentuk pewarnaan background yang dihasilkan dari gambar diatas…
Sintaks diatas untuk menentukan keseluruhan warna background dokumen html, anda dapat mencoba untuk menentukan warna background elemen html.
Menentukan Gambar Background Pada CSS
Selain warna kita juga dapat menggunakan gambar sebagai latar belakang halaman website, cara dengan menggunakan properti background-image pada css. Silahkan siapkan gambar apa saja, yang penting nanti disesuaikan dengan ekstensi gambar tersebut. Berikut ini kodenya.
<!DOCTYPE html>
<html>
  <head>
    <title>Background</title>
      <style type="text/css">
        body {
          background-image: url('image/bg.jpg');
          color: white;
        }
      </style>
  </head>
<body>
   <h1>Mengatur warna latar belakang html</h1>
</body>
</html>Code language: HTML, XML (xml)Berikut ini adalah contoh hasil dari kode diatas jika ditampilkan di browser…
Yang perlu diingat bahwa lokasi yang ditentukan pada sintaks background-image harus sesuai tepat dengan lokasi gambar yang disediakan, jika sudah benar pasti gambar tersebut akan tampil.
Mengatur Perulangan Pada Background Image CSS
Pada pembahasan diatas ketika menentukan sebuah gambar untuk dijadikan background maka gambar tersebut akan mengulang atau menjadi banyak, hal tersebut karna untuk menutupi seluruh tampilan halaman browser komputer, dalam properti background-repeat kita dapat mengatur perulangan pada background gambar tersebut.
<style type="text/css">
  body {
    background-image: url('image/bg.jpg');
    background-repeat: repeat-y;
    color: white;
  }
</style>Code language: HTML, XML (xml)Pada properti background-repeat memiliki 4 nilai atau value yang dapat kita gunakan dan salah satunya untuk menghilangkan perulangan background-image agar background tersebut tidak mengulang banyak. Berikut ini masing-masing penjelasannya.
background-repeat: repeat
Nilai repeat adalah nilai bawaan pada background-repeat, dimana dengan nilai ini background akan mengulang gambar secara horizontal dan vertical.
background-repeat: repeat-x
Nilai repeat-x pada properti background-repeat yaitu akan mengatur perulangan background pada css secara horizontal.
background-repeat: repeat-y
Nilai repeat-y pada properi background-repeat untuk menentukan gambar background secara vertical, sebaliknya dari repeat-x.
background-repeat: no-repeat
Dari kesemuan jenis pengulangan gambar pada background, nilai no-repeat ini justru akan menghentikan atau menghilangkan pengulangan background gambar pada browser.
Mengatur Posisi Background Image Pada CSS
Untuk mengatur posisi background image pada css dapat menggunakan properti background-position dimana kita dapat memberikan nilai antara vertical dan horizontal secara bersamaan, contohnya dibawah ini:
<style type="text/css">
  body {
    background-image: url('image/bg.jpg');
    background-repeat: no-repeat;
    <span style="color: #ff0000;"> background-position: right top;</span>
    color: white;
  }
</style>Code language: HTML, XML (xml)Nilai pada properti background-posisition yang ditanda warna merah diatas bisa di isi dengan nilai pixel atau dengan menggunakan satuan ukuran lainnya. Dimana nilai pertama untuk posisi vertical dan nilai kedua untuk horizontal.
<style type="text/css">
  body {
    background-image: url('image/bg.jpg');
    background-repeat: no-repeat;
    background-position: <span style="color: #ff0000;">100px 100px</span>;
    color: white;
  }
</style>Code language: HTML, XML (xml)Namun jika dengan menggunakan posisi top, bottom, left, right dalam memberikan posisi pada background-position tergantung pada keyword yang ditulis tersebut.
Mengatur Attachment Background Image Pada CSS
Untuk mengatur attachment pada background image di css yaitu dengan menggunakan properti background-attachment, dimana fungsi background-attachment ini dapat menciptakan background image diam ketika di scroll.
<style type="text/css">
  body {
    background-image: url('image/bg.jpg');
    <span style="color: #ff0000;">background-attachment: fixed;</span>
    color: white;
  }
</style>Code language: HTML, XML (xml)Selain nilai fixed, secara default atau bawaan background-attachment memiliki nilai scroll, dimana sebuah background akan tetap mengikuti objek konten di browser.
Mengatur Ukuran Background Image Pada CSS
Untuk dapat mengatur ukuran background image pada css yaitu dengan menggunakan properti background-size, selain untuk mengatur ukuran background image ini fungsi properti background-size juga dapat menjadikan sebuah gambar background menjadi fullscreen atau full ukuran layar monitor, mari kita bahas satu persatu.
background-size: <span style="color: #ff0000;">width</span> <span style="color: #0000ff;">height</span>;Code language: HTML, XML (xml)Contoh properti diatas digunakan untuk menentukan ukuran lebar dan tinggi sebuah background dimana nilai pertama untuk mengatur lebar dan nilai yang kedua untuk mengatur tinggi background yang diinginkan.
<style type="text/css">
  body {
    background-image: url('image/bg.jpg');
background-repeat: no-repeat;
    <span style="color: #ff0000;">background-size: 500px 400px;</span>
    color: white;
  }
</style>Code language: HTML, XML (xml)Namun bagaimana membuat background image agar menjadi fullscreen atau full layar monitor? gunakan nilai cover untuk menjadikan background tersebut fullscreen atau tampil penuh dilayar monitor.
<style type="text/css">
  body {
    background-image: url('image/bg.jpg');
background-repeat: no-repeat;
    <span style="color: #ff0000;">background-size: cover;</span>
    color: white;
  }
</style>Code language: HTML, XML (xml)Sintaks diatas menggunakan nilai cover dimana background tidak diulang dan dengan nilai cover maka background image yang dihasilkan akan fullscreen.
Menggunakan Properti Singkat Background Pada CSS
Apa itu properti singkat? dari pembahasan diatas beberapa properti bisa dijadikan satu properti yaitu hanya dengan menggunakan properti background saja.
background: color image repeat position;
Contoh lengkap yang bisa digunakan pada properti background…
<style type="text/css">
  body {
    <span style="color: #ff0000;">background: yellow url('image/bg.jpg') no-repeat center center;</span>
    color: white;
  }
</style>Code language: HTML, XML (xml)Penggunakan properti background dapat mewakili cara-cara diatas, dengan mempersingkatnya menjadi satu baris kode.
