CSS Background

Background atau latar belakang adalah elemen penting dari suatu web. Yang bikin web itu menarik adalah bagian backgroundnya.

Dengan menggunakan CSS, kita bisa mengganti background web dengan berbagai macam jenis. Misalnya:

Kalau untuk website resmi, biasanya menggunakan background warna. Tapi, jika ingin membuat website untuk portfolio atau company profile yang kreatif, tentu background gambar akan menjadi lebih menarik.

Property Background CSS

Untuk mengganti background CSS, kita tinggal memasukkan property background: kedalam selektor css body. Contohnya:

body {background: black}

Mengapa body? Ingat, struktur html website itu ada <head> dan <body>. Dan semua yang ditampilkan di layar browser adalah apapun yang ada di dalam <body>.

Jadi, <body> itu sendiri adalah kotak area alias canvas kosong yang bisa kita ubah menjadi bentuk apapun.

Di <body> inilah, kita bisa mengatur default tampilan web secara keseluruhan, misalnya: jenis font, warna background, ukuran huruf, dll.

Background Warna dengan CSS

Cara mengganti warna background atau latar belakang web sangat mudah, yaitu hanya tinggal memasukkan porperti background dengan value warna yang diinginkan.

Misal, saya ingin mengganti background menjadi warna biru. Maka kode CSSnya adalah:

File belajar.css

body {
	background-color: blue;
}

File belajar.html

<!DOCTYPE html>
<html>
<head>
	<title>Background Warna CSS</title>
</head>
<body>
	Ini isi teks
</body>
</html>

Outputnya menjadi:

Note: kamu bisa mengisi value warna dengan menggunakan kode warna html seperti RGB, HEX, CMYK atau nama-nama umum seperti red, blue, green, dll.

Background Warna Gradient

Lalu, bagaimana cara membuat background gradasi warna di web dengan CSS?

Ini agak kompleks ya, karena kita harus mengetahui arah posisi warna gradient. Contoh gradient warna yaitu:

Cara paling mudah adalah menggunakan tools css generator. Buka situs: https://cssgradient.io.

Silahkan berkreasi dengan tools yang disediakan, seperti memilih warna, posisi, jenis, opacity, dll.

Kemudian, tinggal copy kode CSS yang ada dibawahnya. Yang ini:

Klik copy to clipboard dan paste ke dalam selector css tadi. Misal:

body{
background: rgb(0,0,0);
background: linear-gradient(90deg, rgba(0,0,0,1) 0%, rgba(255,255,255,1) 100%);
}

Background Gambar dengan CSS

Kedua kita bisa mengganti background website dengan gambar. Untuk mengubahnya kita tinggal mengganti property background-color menjadi background-image.

body {
	background: url(gambar.jpg);
	color: white
}

Dengan masih menggunakan file html belajar.html yang sama, hanya saya tambahin <h1> saja. Maka hasilnya akan menjadi:

Yang penting kamu perhatikan adalah property dari gambar yang digunakan.

propertyvalueketerangan
background-attachment
  • scroll
  • fixed
  • local
  • initial
  • inherit
Mengatur background apakah posisinya fixed (tetap) atau scroll (mengikuti scrolling atas bawah browser)
background-imageurl gambarMemilih gambar yang akan dijadikan background
background-origin
  • padding-box
  • border-box
  • content-box
  • initial
  • inherit
Mengatur spesifik posisi default gambar
background-position
  • left top
  • left center
  • left bottom
  • right top
  • right center
  • right bottom
  • center top
  • center center
  • center bottom
  • x% y%
  • xpos ypos
  • initial
  • inherit
Atur posisi awal gambar
background-repeat
  • repeat
  • repeat-x
  • repeat-y
  • no-repeat
  • space
  • round
  • initial
  • inherit
Atur bagaimana gambar diulang (repeat)
background-size&nilai angka bisa: %, pxMengatur ukuran gambar

Kalau saya jelaskan semuanya tentu panjang bangeeeetttt. Jadi, silahkan di otak-atik sendiri ya.

Format umum yang digunakan untuk background image adalah: .jpg, .webp, .svg, .gif

Leave a Comment