Cara Mengubah Background HTML Dengan CSS

Ibrahim Al Anshor | 2 days ago | css

Mengubah Background HTML - Background atau latar belakang merupakan salah satu elemen penting dalam desain web.

Background berfungsi untuk memberikan visual pada halaman web yang dapat meningkatan kemudahan dan kenyamanan pengunjung.

Dengan CSS kita dapat mengubah atau mengatur background website dengan warna atau gambar.

Langsung saja berikut adalah cara mengubah background HTML dengan CSS.

Mengubah Warna Background

Untuk mengubah warna background, kita dapat menggunakan property background-color, yang bernilai nama/kode warnanya.

body {
  background-color: red;
}

Background Color

Selain dengan warna, kita juga dapat mengubah background dengan gambar, yaitu dengan property background-image, yang bernilai url/nama gambarnya.

background-image: url("nama-gambar.jpg");

Contoh

body {
  background-image: url("enak.jpg");
}

Background Image

Untuk mengatur bagaimana gambar ditampilkan sebagai background, terdapat beberapa property tambahan, antara lain:

Jika gambar yang digunakan ukuranya lebih kecil dari lebar elemen, maka gambar tersebut akan ditampilkan secara berulang.

Untuk mengaturnya perulanganya gunakanlah property background-repeat.

body {
  background-image: url("enak.jpg");
  background-repeat: no-repeat;
}

Background Repeat

Nilai yang dapat digunakan:

Digunakan untuk mengatur posisi gambar background-nya.

Nilai yang dapat digunakan seperti top, bottom, left, right, dsb.

body {
  background-image: url("enak.jpg");
  background-repeat: no-repeat;
  background-position: right;
}

Background Position

Digunakan untuk mengatur ukuran gambar background-nya.

Nilai yang dapat digunakan seperti auto, cover, contain, pixel, persen, dsb.

body {
  background-image: url("enak.jpg");
  background-repeat: no-repeat;
  background-size: 300px 200px;
}

Background Size

Untuk pembahasan lebih lanjut mengenai penggunaan background pada CSS, anda dapat mengunjungi tautan berikut.