CSS Basic - Latar Belakang

CSS Basic – Latar Belakang

Membuat latar belakang (background) salah satu bagian terpenting dalam membuat tampilan website menjadi lebih menarik. Tapi perlu diketahui, membuat suatu background juga harus menerapkan sintaks berupa html dan css. Kamu dapat mengatur background menggunakan CSS.

Beberapa properti elemen yang perlu kamu pelajari, diantaranya:

  • Properti background-image digunakan untuk mengatur gambar latar belakang pada suatu elemen.
  • Properti background-position digunakan untuk mengontrol posisi gambar di latar belakang.
  • Properti background-attachment digunakan untuk mengontrol bergulir dari gambar latar belakang.
  • Properti background-color digunakan untuk mengatur warna background.
  • Properti background-repeat digunakan untuk mengendalikan pengulangan gambar di latar belakang.
  • Properti background digunakan sebagai singkatan untuk menentukan sejumlah properti latar belakang lainnya.

Mengatur Warna Latar Belakang

Berikut dibawah ini sintaks dan preview kodingan yang dibuat sebagai contoh.

Menetapkan Gambar Latar Belakang

kamu juga dapat menerapkan gambar pada latar belakang menggunakan sintaks seperti dibawah ini.

Mengulangi Latar Belakang

Contoh dibawah ini menunjukkan bagaimana mengulangi latar belakang jika gambar berukuran kecil. Kamu bisa gunakan no-repeat value untuk properti background-repeat jika kamu tidak ingin mengulang gambar, dalam hal ini gambar hanya akan ditampilkan dalam sekali.

Sintaks dibawah ini diterapkan jika kamu ingin mengulang gambar latar belakang secara vertikal.

Untuk mengulang gambar latar belakang secara horizontal kamu cukup mengubah repeat-y menjadi repeat-x.

Mengatur Posisi Latar Belakang

Contoh dibawah ini menunjukkan bagaimana kamu dapat mengatur posisi latar belakang 100 piksel dari sebelah kiri.

Satu hal lagi kamu dapat lakukan dalam mengatur posisi gambar latar belakang 300 piksel dari sisi kiri dan 500 piksel turun dari atas.

Menetapkan Lampiran Pada Latar Belakang

Lampiran latar belakang menentukan apakah gambar latar belakang diperbaiki atau digulirkan dengan sisa halaman. Contoh dibawah ini, akan menjelaskan seperti apa penjelasan ini.

Bandingkan dengan sintaks dibawah ini. Gambar latar belakang akan mengikuti isi teks belajar CSS Lengkap dari dasar sampai mahir hanya di Bier Pinter. 

Menggunakan Properti Shorthand

Kamu dapat menggunakan properti latar belakang untuk mengatur semua properti latar belakang sekaligus. Perhatikan sintaks dibawah ini.

Inilah CSS Basic dalam memodifikasi latar belakang. Kamu dapat mengatur style CSS dan menambah style CSS sesuai kebutuhan kamu.

Materi sebelumnya: CSS Basic – Unit Pengukuran