Skip to main content

B.4.2.4. Backgrounds

Pada chapter ini kita akan membahas semua yang berkaitan dengan background di CSS seperti background-color, background dan background-image. Karena pembahasannya akan panjang, temen-temen boleh siapkan cemilan dan jangan lupa sedia air putih juga ya🙌.

B.4.2.4.1. background-color​

background-color adalah properti yang digunakan untuk menetapkan warna latar belakang pada suatu elemen. Temen-temen bisa menggunakan nama warna, kode heksadesimal, HSL, HSLA, RGB, atau RGBA untuk menentukan warnanya.

Siktaks dari properti ini cukup sederhana:

selector {
  background-color: value;
}

Nah untuk menggunakan properti ini juga cukup mudah, coba temen-temen perhatikan kode berikut:

<div class="hex"></div>
<div class="rgba"></div>

Kita punya dua buah tag <div> yang masing-masing memiliki class yang berbeda. Setelahnya kita terapan style untuk div secara general dan kita beri warna dengan nilai yang berbeda untuk masing-masing div menggunakan class-selector.

bisa temen-temen lihat hasilnya akan terlihat seperti gambar di bawah ini:

Output

Untuk <div> yang kedua kita berikan nilainya berupa RGBA, lalu kita set alpha nya menjadi 0.5. Nilai alpha merepresentasikan tingkat transparansi pada warna yang di terapkan.

B.4.2.4.2. background-image​

Propertibackground-image digunakan untuk menetapkan gambar sebagai latar belakang elemen. Gambar bisa berasal dari path lokal atau URL.

Sintaks nya pun cukup sederhana:

selector {
  background-image: url("/path/to/image.png");
}

Untuk cara penggunaannya, teme-temen bisa perhatikan kode berikut:

<div class="card-image"></div>

Jika temen-temen buka di web browser maka hasilnya akan terlihat seperti:

Output

Bisa terlihat sekarang tag <div> memiliki sebuah background yang di ambil dari sebuah gambar. Namun, hasilnya terlihat seperti gepeng ya?🤔 temen-temen bisa tambahkan properti background-size:cover; agar gambarnya berukuran penuh memenuhi ukuran dari parent element-nya.

.card-image {
  width: 400px;
  height: 250px;
  background-image: url("./sakura.jpg");
  background-size: cover;
  border-radius: 1.5rem;
}

Jika di lihat kembali di web browser maka sekarang tampilan yang di hasilkan akan terlihat lebih pas dan rapih.

Output

Selain properti background-size ada juga properti lain yang bisa temen-temen gunakan, mari kita coba bahas satu per-satu.

B.4.2.4.2.1. background-position​

Properti ini menentukan posisi gambar latar belakang di dalam elemen. Temen-temen bisa menggunakan kata kunci seperti center, top, bottom, left, dan right untuk menentukan posisinya. Misalnya:

.card-image {
  width: 400px;
  height: 250px;
  background-image: url("./sakura.jpg");
  background-size: 200px;
  border-radius: 1.5rem;
  background-color: rgb(233, 206, 206);
  background-position: center;
  background-repeat: no-repeat;
}

Jika kita buka di web browser maka hasilnya akan terlihat seperti:

Output

Kalau temen-temen tidak menentukan posisi, gambar akan ditempatkan di sudut kiri atas secara default.

Output

B.4.2.4.2.2. background-repeat​

Secara bawaan, jika temen-temen menggunakan sebuah gambar maka properti background-repeat akan otomatis bernilai repeat. Ini berarti, ketika ukuran gambar lebih kecil di banding ukuran container-_nya maka gambar akan di tampilkan secara ulang sebanyak hingga memenuhi lebar keseluruhan _container. Sebagai contoh coba perhatikan kode di bawah:

.card-image {
  width: 400px;
  height: 250px;
  background-image: url("./sakura.jpg");
  background-size: 200px;
  border-radius: 1.5rem;
  background-color: rgb(233, 206, 206);
}

Untuk mensimulasikannya, kita akan set lebar gambarnya ke 200px yaitu setengah dari lebar element aslinya yang di set sebesar 400px. Ketika temen-temen buka di web browser maka hasilnya akan terlihat seperti:

Output

Properti background-repeat akan mengatur apakah gambar latar belakang diulang atau tidak. Ada beberapa opsi:

  • repeat: Gambar akan diulang baik secara horizontal maupun vertikal.
  • no-repeat: Gambar tidak akan diulang.
  • repeat-x: Gambar hanya akan diulang secara horizontal.
  • repeat-y: Gambar hanya akan diulang secara vertikal.

Contohnya:

background-repeat: no-repeat;

Maka hasilnya akan terlihat seperti:

Output

B.4.2.4.2.3. background-attachment​

Ini menentukan bagaimana gambar latar belakang bergerak saat halaman di-scroll:

  • scroll: Gambar akan bergerak bersama dengan halaman saat di-scroll (default).
  • fixed: Gambar tetap di tempat saat halaman di-scroll.
  • local: Gambar akan bergerak bersama dengan elemen saat di-scroll.

Misalnya:

<body>
  <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit.</p>
  <!--- .......More 200 line codes --->
</body>

Silahkan temen-temen coba buat tag <p> sebanyak mungkin sampai hasilnya bisa di scroll ya. Setelahnya, temen-temen bisa terapkan 3 nilai di atas lalu lihat perbedannya di web browser masing-masing.

B.4.2.4.2.4. background-clip​

Ini menentukan area mana yang akan digunakan untuk menampilkan latar belakang. Sebagai contoh, coba temen-temen perhatikan kode berikut:

<div class="box-1"></div>
<div class="box-2"></div>
<div class="box-3"></div>

  • border-box: Latar belakang akan berada di dalam border box, termasuk border dan padding.

    Output

  • padding-box: Latar belakang akan berada di dalam padding box, tidak termasuk border.

    Output

  • content-box: Latar belakang akan berada di dalam content box, tidak termasuk padding dan border.

    Output

Bisa temen-temen lihat perbedaan dari ketika nilai properti di atas. Untuk lebih jelasnya, silahkan temen-temen coba sendiri ya.

B.4.2.4.2.5. background-blend-mode​

Properti ini digunakan untuk mengatur cara pencampuran warna latar belakang dan gambar latar belakang. Ada beberapa mode blend seperti normal(default), multiply, screen, overlay, hard-light, difference,dll. Misalnya:

<div class="card-image"></div>

Output

Sekarang, coba kita ganti nilai untuk properti background-blend-mode:multiply; maka hasilnya akan terlihat seperti:

Output

Silahkan temen-temen bisa langsung ber-eksperimen dengan mengganti nilai dari properti ini seperti yang telah di jabarkan di atas ya.

B.4.2.4.3. Shorthand Untuk background​

Jika untuk mengatur sebuah background baris kode yang di hasilkan menjadi lebih panjang, maka alternatif-nya temen-temen bisa gunakan shorthand yaitu background. Sintaks nya cukup sederhana, coba temen-temen perhatikan kode berikut:

background: <color> <image> <position> <size> <repeat> <attachment>;

Untuk penggunaannya, coba temen-temen perhatikan kode berikut:

<div class="card-image"></div>

Maka hasilnya akan terlihat seperti:

Output

Untuk penggunaan shorthand atau mendefinisikannya satu per-satu, silahkan di seuaikan dengan preferensi temen-temen masing-masing ya nyaman-nya pakai yang seperti apa.

info

Source ode pada chapter ini tersedia di GitHub
https://github.com/mframadann/webdev-dasar-example/tree/main/b-css/chapter-B.4-properti-css/B.4.2-box-styling/B.4.2.4-backgrounds