Tutorial Belajar CSS Bagian 5 : Cara Menggunakan Properti Background di CSS

Pada tutorial sebelumnya, kita sudah mempelajari Tutorial Belajar CSS Bagian 4 : Tabel Satuan Pengukuran di CSS. Pada tutorial kali ini, kita belajar cara menggunakan properti background di CSS.

Anda dapat mengatur properti background elemen berikut :

  • Properti background-color digunakan untuk menyetel warna latar belakang sebuah elemen.
  • Properti background-image digunakan untuk menyetel gambar latar belakang suatu elemen.
  • Properti background-repeat digunakan untuk mengontrol pengulangan gambar di latar belakang.
  • Properti background-position digunakan untuk mengontrol posisi gambar di latar belakang.
  • Properti background-attachment digunakan untuk mengontrol pengguliran gambar di latar belakang.
  • Properti background digunakan sebagai singkatan untuk menentukan sejumlah properti latar belakang lainnya.

Atur Background Color

Berikut adalah contoh yang menunjukkan bagaimana mengatur warna latar belakang untuk suatu elemen :

<html>
   <head>
   </head>

   <body>
      <p style = "background-color:yellow;">
         Tulisan ini memiliki warna latar belakang kuning.
      </p>
   </body>
</html>

Browser akan menampilkan hasil sebagai berikut :

Atur Background Image

Kita dapat mengatur gambar latar belakang dengan memanggil gambar yang disimpan lokal seperti yang ditunjukkan di bawah ini :

<html>
   <head>
      <style>
         body  {
            background-image: url("https://mbahwp.com/wp-content/uploads/2017/07/Logo-Mbah-WP.png");
            background-color: #cccccc;
         }
      </style>
   </head>
   
   <body>
      <h1>Halo Dunia!</h1>
   </body>
<html>

Browser akan menampilkan hasil sebagai berikut :

Mengulangi Background Image

Contoh berikut menunjukkan cara mengulang gambar latar belakang jika gambarnya kecil. Anda dapat menggunakan nilai ‘no-repeat’ untuk properti ‘background-repat’ jika Anda tidak ingin mengulang gambar, dalam hal ini gambar hanya akan ditampilkan sekali.

Secara default properti ‘background-repeat’ akan memiliki nilai ‘repeat’.

<html>
   <head>
      <style>
         body {
            background-image: url("https://mbahwp.com/wp-content/uploads/2017/07/Logo-Mbah-WP.png");
            background-repeat: repeat;
         }
      </style>
   </head>

   <body>
      <p>Mbah WP</p>
   </body>
</html>

Browser akan menampilkan hasil sebagai berikut :

Contoh berikut yang menunjukkan bagaimana mengulang gambar latar belakang secara vertikal.

<html>
   <head>
      <style>
         body {
            background-image: url("https://mbahwp.com/wp-content/uploads/2017/07/Logo-Mbah-WP.png");
            background-repeat: repeat-y;
         }
      </style>
   </head>

   <body>
      <p>Mbah WP</p>
   </body>
</html>

Browser akan menampilkan hasil sebagai berikut :

Contoh berikut menunjukkan cara mengulang gambar latar belakang secara horizontal.

<html>
   <head>
      <style>
         body {
            background-image: url("https://mbahwp.com/wp-content/uploads/2017/07/Logo-Mbah-WP.png");
            background-repeat: repeat-x;
         }
      </style>
   </head>
   
   <body>
      <p>Mbah WP</p>
   </body>
</html>

Browser akan menampilkan hasil sebagai berikut :

Atur Posisi Background Image

Contoh berikut mendemonstrasikan cara mengatur posisi gambar latar belakang 100 piksel dari sisi kiri.

<html>
   <head>
      <style>
         body {
            background-image: url("https://mbahwp.com/wp-content/uploads/2017/07/Logo-Mbah-WP.png");
            background-position:100px;
         }
      </style>
   </head>

   <body>
      <p>Mbah WP</p>
   </body>
</html>

Browser akan menampilkan hasil sebagai berikut :

Contoh berikut mendemonstrasikan cara mengatur posisi gambar latar belakang 100 piksel dari sisi kiri dan 200 piksel dari atas.

<html>
   <head>
      <style>
         body {
            background-image: url("https://mbahwp.com/wp-content/uploads/2017/07/Logo-Mbah-WP.png");
            background-position:100px 200px;
         }
      </style>
   </head>

   <body>
      <p>Mbah WP</p>
   </body>
</html>

Browser akan menampilkan hasil sebagai berikut :

Atur Background Attachment

Background attachment menentukan apakah gambar latar belakang tetap atau bergulir dengan sisa halaman.

Contoh berikut menunjukkan cara mengatur gambar latar belakang tetap.

<!DOCTYPE html>
<html>
   <head>
      <style>
         body {
            background-image: url('https://mbahwp.com/wp-content/uploads/2017/07/Logo-Mbah-WP.png');
            background-repeat: no-repeat;
            background-attachment: fixed;
         }
      </style>
   </head>

   <body>
      <p> Gambar latar belakang tetap. Cobalah untuk menggulir halaman ke bawah.</p>
      <p> Gambar latar belakang tetap. Cobalah untuk menggulir halaman ke bawah.</p>
      <p> Gambar latar belakang tetap. Cobalah untuk menggulir halaman ke bawah.</p>
      <p> Gambar latar belakang tetap. Cobalah untuk menggulir halaman ke bawah.</p>
      <p> Gambar latar belakang tetap. Cobalah untuk menggulir halaman ke bawah.</p>
      <p> Gambar latar belakang tetap. Cobalah untuk menggulir halaman ke bawah.</p>
      <p> Gambar latar belakang tetap. Cobalah untuk menggulir halaman ke bawah.</p>
      <p> Gambar latar belakang tetap. Cobalah untuk menggulir halaman ke bawah.</p>
      <p> Gambar latar belakang tetap. Cobalah untuk menggulir halaman ke bawah.</p>
   </body>
</html>

Browser akan menampilkan hasil sebagai berikut :

Contoh berikut menunjukkan cara mengatur gambar latar bergulir.

<!DOCTYPE html>
<html>
   <head>
      <style>
         body {
            background-image: url('https://mbahwp.com/wp-content/uploads/2017/07/Logo-Mbah-WP.png');
            background-repeat: no-repeat;
            background-attachment:scroll;
         }
      </style>
   </head>

   <body>
      <p> Gambar latar belakang bergerak. Cobalah untuk menggulir halaman ke bawah.</p>
      <p> Gambar latar belakang bergerak. Cobalah untuk menggulir halaman ke bawah.</p>
      <p> Gambar latar belakang bergerak. Cobalah untuk menggulir halaman ke bawah.</p>
      <p> Gambar latar belakang bergerak. Cobalah untuk menggulir halaman ke bawah.</p>
      <p> Gambar latar belakang bergerak. Cobalah untuk menggulir halaman ke bawah.</p>
      <p> Gambar latar belakang bergerak. Cobalah untuk menggulir halaman ke bawah.</p>
      <p> Gambar latar belakang bergerak. Cobalah untuk menggulir halaman ke bawah.</p>
      <p> Gambar latar belakang bergerak. Cobalah untuk menggulir halaman ke bawah.</p>
      <p> Gambar latar belakang bergerak. Cobalah untuk menggulir halaman ke bawah.</p>
   </body>
</html>

Browser akan menampilkan hasil sebagai berikut :

Shorthand Property

Anda dapat menggunakan properti background untuk mengatur semua properti background sekaligus. Sebagai contoh :

<p style = "background:url(https://mbahwp.com/wp-content/uploads/2017/07/Logo-Mbah-WP.png) repeat fixed;">
   Pharagraf ini bernilai fixed repeated background image.
</p>

Semoga tutorial ini membantu Anda mempelajari cara menggunakan properti background di CSS untuk mendesain dokumen HTML.

Artikel Lainnya

0 Komentar

Kirim Komentar

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *

Situs ini menggunakan Akismet untuk mengurangi spam. Pelajari bagaimana data komentar Anda diproses.

0