Background Dalam CSS

1. Background Color

Dalam CSS, Anda memiliki kemampuan untuk mengatur warna, gradien, dan gambar sebagai latar belakang suatu elemen. Salah satu cara untuk mengatur background dalam css adalah dengan menggunakan properti background-color. Properti ini memungkinkan Anda untuk mendefinisikan warna latar belakang menggunakan berbagai metode.

Nama Warna

Satu cara untuk menentukan warna adalah dengan menggunakan nama-nama warna. Misalnya:

div {
  background-color: red;
}

Ini akan memberikan latar belakang berwarna merah pada elemen <div>.

Kode Warna Hex

Kode heksadesimal (hex) adalah cara lain untuk mewakili warna dalam CSS. Menggunakan notasi heksadesimal berbasis-16 untuk menyatakan komponen RGB suatu warna.

BACA JUGA : Bagaimana Cara menggunakan CSS 3

Sebagai contoh, #ff0000 mewakili warna merah terang, di mana komponen merah berada pada nilai maksimum (ff) dan komponen hijau serta biru diatur menjadi 0 (00).

body {
  background-color: #de1205; /* merah */
}
.main {
  background-color: #00f; /* biru */
}

Pada contoh di atas, elemen body akan memiliki latar belakang merah (#de1205), sedangkan kelas .main akan memiliki latar belakang biru (#00f).

RGB / RGBa

RGB (Merah, Hijau, Biru) adalah cara lain untuk menentukan warna dalam CSS. Ini memerlukan tiga nilai terpisah antara 0 dan 255, yang mewakili nilai warna desimal untuk merah, hijau, dan biru secara berurutan.

RGBa memungkinkan Anda untuk menambahkan parameter alpha tambahan antara 0.0 dan 1.0 untuk mendefinisikan opasitas.

header {
  background-color: rgb(0, 0, 0); /* hitam */
}
footer {
  background-color: rgba(0, 0, 0, 0.5); /* hitam dengan opasitas 50% */
}

Pada contoh di atas, elemen header akan memiliki latar belakang hitam, sementara elemen footer akan memiliki latar belakang hitam dengan opasitas 50%.

HSL / HSLa

HSL (Hue, Saturation, Lightness) adalah representasi warna lain dalam CSS. Memungkinkan Anda untuk menentukan warna berdasarkan nilai hue, saturation, dan lightness.

Seperti RGB, HSLa memungkinkan Anda untuk menambahkan parameter alpha untuk mendefinisikan opasitas.

li a {
  background-color: hsl(120, 100%, 50%); /* hijau */
}
#p1 {
  background-color: hsla(120, 100%, 50%, 0.3); /* hijau dengan opasitas 30% */
}

Pada contoh di atas, elemen li a akan memiliki latar belakang hijau, sedangkan elemen dengan ID p1 akan memiliki latar belakang hijau dengan opasitas 30%.

2. Background Gradients

Gradien adalah fitur kuat yang diperkenalkan dalam CSS3, yang memungkinkan Anda untuk membuat transisi yang halus antara warna. Ada dua jenis fungsi gradien: linear dan radial.

Gradien Linear

Gradien linear menciptakan gradien yang bertransisi dari satu warna ke warna lainnya dalam garis lurus.

.gradien-linear {
  background: linear-gradient(to left, red, blue);
}

Pada contoh di atas, kelas .gradien-linear akan memiliki latar belakang gradien linear yang dimulai dari kanan dan bertransisi dari merah ke biru.

Gradien Radial

Gradien radial menciptakan gradien yang memancar dari titik pusat ke pinggiran.

.gradien-radial-sederhana {
  background: radial-gradient(red, blue);
}
.gradien-radial {
  background: radial-gradient(circle farthest-corner top left, red, blue);
}

Pada contoh di atas, kelas .gradien-radial-sederhana akan memiliki latar belakang gradien radial sederhana yang bertransisi dari merah ke biru.

Kelas .gradien-radial akan memiliki gradien radial yang lebih kompleks yang dimulai dari sudut kiri atas dan menggunakan sudut terjauh sebagai bentuk akhir.

Gradien Berulang

Anda dapat membuat gradien berulang dengan menggunakan fungsi gradien berulang. Fungsi ini membagi latar belakang elemen dengan gradien yang diulang secara berulang.

.target-mata-dart {
  background: repeating-radial-gradient(red, red 10%, white 10%, white 20%);
}
.peringatan {
  background: repeating-linear-gradient(-45deg, yellow, yellow 10%, black 10%, black 20%);
}

Pada contoh di atas, kelas .target-mata-dart akan memiliki latar belakang gradien radial berulang yang menciptakan efek sasaran mata panah dengan cincin merah dan putih yang saling bergantian.

Kelas .peringatan akan memiliki latar belakang gradien linear berulang yang menciptakan efek tanda peringatan dengan garis miring kuning dan hitam yang saling bergantian.

3. Background Image

Properti background-image digunakan untuk menentukan gambar latar belakang yang akan diterapkan pada elemen. Secara default, gambar akan diulang untuk meliputi seluruh elemen, kecuali margin.

.myClass {
  background-image: url('/path/to/image.jpg');
}

Pada contoh di atas, kelas .myClass akan memiliki gambar yang terletak di ‘/path/to/image.jpg’ sebagai gambar latar belakangnya.

Untuk menggunakan beberapa gambar sebagai gambar latar belakang, Anda dapat menentukan beberapa URL yang dipisahkan dengan koma:

.myClass {
  background-image: url('/path/to/image.jpg'), url('/path/to/image2.jpg');
}

Pada contoh ini, baik ‘image.jpg’ maupun ‘image2.jpg’ akan digunakan sebagai gambar latar belakang untuk kelas .myClass. Gambar-gambar tersebut akan ditumpuk dengan gambar yang dideklarasikan pertama di atas gambar lainnya.

Properti Latar Belakang Tambahan

Ada beberapa properti tambahan yang dapat digunakan untuk memodifikasi gambar latar belakang:

• background-size: Menentukan ukuran gambar latar belakang.
• background-repeat: Mengontrol bagaimana gambar latar belakang diulang.
• background-position: Menetapkan posisi gambar latar belakang.

4. Background Shorthand

Properti background dapat digunakan sebagai singkatan untuk mengatur beberapa properti terkait latar belakang sekaligus.

.myClass {
  background: red;
}

Pada contoh ini, kelas .myClass akan memiliki latar belakang berwarna merah. Properti background dapat menerima beberapa nilai dalam urutan tertentu, memungkinkan Anda untuk mengatur berbagai properti latar belakang dalam satu baris kode.

Urutan nilai tidak penting, dan setiap nilai bersifat opsional. Berikut adalah sintaks dari deklarasi singkatan background:

background: [<background-image>] [<background-color>] [<background-position>]/[<background-size>]
  [<background-repeat>] [<background-origin>] [<background-clip>] [<background-attachment>]
  [<initial|inherit>];

Anda dapat menyertakan kombinasi apa pun dari properti latar belakang di dalam deklarasi singkatan tersebut. Sebagai contoh:

background: url('pattern.png') hijau;

Pada contoh ini, warna latar belakang elemen akan diatur sebagai hijau dengan ‘pattern.png’ ditumpuk di atasnya, berulang sesuai kebutuhan untuk mengisi elemen. Jika ‘pattern.png’ memiliki transparansi, warna hijau akan terlihat di belakangnya.

BACA JUGA : HTML5 Canvas: Panduan Lengkap

Deklarasi singkatan background memungkinkan Anda untuk mengatur properti seperti gambar latar belakang, warna latar belakang, posisi latar belakang, ukuran latar belakang, pengulangan latar belakang, asal latar belakang, potongan latar belakang, dan lampiran latar belakang dengan cara yang ringkas.

Perlu diingat bahwa ketika menggunakan singkatan background, semua properti yang tidak didefinisikan secara eksplisit akan mengambil nilai default, seperti dijelaskan dalam sintaks singkatan.

Semoga ini dapat membantu Anda memahami konsep dasar tentang latar belakang di CSS.