Mengenal Property Background Pada CSS

Mengenal Property Background Pada CSS

Background merupakan elemen penting dalam sebuah website.

Background memberi efek visual yang dapat meningkatkan user experience ataupun membuat website menjadi lebih menarik.

Pada CSS terdapat beberapa yang berfungsi untuk mengatur background. Yaitu

  • background-color
  • background-image
  • background-size
  • background-repeat
  • background-size
  • background-attachment

Langsung saja, berikut penjelasanya satu persatu.

background-color

Property ini digunakan untuk mengatur warna background sebuah elemen html.

Berikut syntaknya.

background-color: nama-warna;

Contoh

background-image

Property ini digunakan untuk mengatur gambar sebagai background sebuah elemen.

Berikut syntaknya.

background-image: url(alamat-gambar);

Contoh

background-size

Property ini digunakan untuk mengatur ukuran gambar pada background-image.

Berikut syntaknya.

background-size: cover, contain, ukuran;

Yang dimaksud ukuran, adalah anda dapat mengisi background size dengan ukuran seperti 100px.

background-repeat

Sebelumnya di background-size, gambar yang dijadikan background terlihar berulang ulang. Nah, untuk mengaturnya kita menggunakan background-repeat.

Berikut syntaknya.

background-repeat: repeat, repeat-x, repeat-z, no-repeat;

repeat-z berfungsi untuk mengatur perulangan vertikal, x untuk horizontal.

no-repeat berfungsi agar tidak ada perulangan.

Contoh.

background-position

Property ini berfungsi untuk mengatur posisi dari background.

Berikut syntaknya.

background-position: left top, right bottom, center center, dl;

Contoh

background-attachment

Property ini berfungsi untuk mengatur apakah background akan ikut scroll ketika mouse scroll, atau tetap fixed.

Berikut syntaknya.

background-attachment: fixed, scroll, local;

Contoh

background

Ini merupakan shorthand yang digunakan untuk menyingkat syntak.

Jadi background menggabungkan semua property dalam satu property.

Contoh

div {
 background: blur url(bg.jpg) no-repeat fixed center;
}

Itulah beberapa ketujuh property background yang ada pada css. Sebenarnya masih ada, tapi nanti kepanjangan kalau saya jelaskan.

Sekian semoga bermanfaat.

Related Post

Comments

X