Pelajari cara menggunakan latar belakang di CSS untuk mendesain elemen HTML dengan gambar atau warna latar.

CSS Backgrounds

CSS memungkinkan Anda untuk menambahkan latar belakang pada elemen HTML menggunakan berbagai properti.

1. Menggunakan Warna Latar Belakang (`background-color`)

Properti background-color digunakan untuk memberi warna latar belakang pada elemen.

div {
  background-color: lightblue;
}

2. Menggunakan Gambar Latar Belakang (`background-image`)

Anda bisa menggunakan gambar sebagai latar belakang elemen dengan background-image.

div {
  background-image: url('https://www.mulaicode.com/background.jpg');
  background-size: cover; /* Membuat gambar menutupi seluruh elemen */
}

3. Menggunakan Background Multiple (`background`)

Anda dapat menggabungkan beberapa properti latar belakang (seperti gambar dan warna) menggunakan shorthand background.

div {
  background: lightblue url('https://www.mulaicode.com/background.jpg') no-repeat center center fixed;
}

4. Menggunakan Background Position (`background-position`)

Dengan background-position, Anda dapat menentukan posisi gambar latar belakang.

div {
  background-image: url('https://www.mulaicode.com/background.jpg');
  background-position: center top; /* Menempatkan gambar di tengah atas */
}

5. Menggunakan Background Repeat (`background-repeat`)

Dengan background-repeat, Anda dapat mengontrol apakah gambar latar belakang akan diulang atau tidak.

div {
  background-image: url('https://www.mulaicode.com/background.jpg');
  background-repeat: no-repeat; /* Menghindari pengulangan gambar */
}

6. Menggunakan Background Size (`background-size`)

Dengan background-size, Anda dapat mengontrol ukuran gambar latar belakang.

div {
  background-image: url('https://www.mulaicode.com/background.jpg');
  background-size: contain; /* Memastikan gambar terlihat sepenuhnya dalam elemen */
}

Ringkasan Properti Background CSS

Properti	Deskripsi
`background-color`	Menentukan warna latar belakang.
`background-image`	Menentukan gambar sebagai latar belakang.
`background-position`	Menentukan posisi gambar latar belakang.
`background-repeat`	Mengontrol apakah gambar latar belakang diulang atau tidak.
`background-size`	Menentukan ukuran gambar latar belakang.
`background`	Shorthand untuk menggabungkan beberapa properti background.

CSS Backgrounds

On this page