Kode css yang tepat untuk mengubah latar belakang berupa gambar pada halaman web adalah

Question

Estimasi Waktu Baca: 8 menit

Table of Contents Show

6 Properti Dasar Background di CSS
Properti Background Color CSS
Perbedaan Opacity dan Alpha Channel
Properti Background Image CSS
Background Image dengan Gradasi Warna
Tips untuk Propeti Background Image
Properti Background Repeat CSS
Properti Background Position CSS
Properti Background Attachment CSS
Properti Background (Shorthand) CSS
Pendinginan
Apa HTML yang benar untuk memasukkan gambar latar belakang?
Properti apa yang digunakan untuk latar belakang warna pada CSS?
Apa itu background image?
Apa itu background repeat?

Artikel ini merupakan artikel ke #06 dari seri Tutorial CSS Dasar untuk Pemula. Untuk yang sekiranya sudah memahami tentang properti background css, bisa lanjut ke materi berikutnya yaitu Font di CSS.

Daftar Isi

- Pemanasan

- 6 Properti Dasar Background di CSS
- Properti Background Color CSS
  - Perbedaan Opacity dan Alpha Channel

- Properti Background Image CSS
  - Background Image dengan Gradasi Warna
  - Tips untuk Background Image

- Properti Background Repeat CSS
- Properti Background Position CSS
- Properti Background Attachment CSS
- Properti Background (Shorthand) CSS

- Pendinginan
- Referensi

Pemanasan

Background merupakan salah satu elemen terpenting dalam CSS. Dengannya kita dapat menentukan suatu website akan memiliki tampilan atau tema seperti apa nantinya.

Secara default background halaman web pada browser berwarna putih, namun kita dapat mengubahnya dengan mudah menggunakan properti CSS yang bernama background.

Namun properti untuk mengatur background tidak hanya satu, ada banyak sekali dengan masing-masing properti tersebut memiliki fungsi yang berbeda-beda.

6 Properti Dasar Background di CSS

Tercatat sedikitnya ada 10 properti yang berkaitan dengan background. Namun pada artikel ini, kita hanya akan belajar 6 properti diantaranya:

background-color
background-image
background-repeat
background-attachment
background-position
background

Properti Background Color CSS

Properti background-color berfungsi untuk memberi warna latar pada halaman website. Nilai defaultnya adalah transparent.

Untuk sintaksnya adalah sebagai berikut:


background-color: value;

Kita juga dapat mengganti nilainya menggunakan berbagai format penulisan yang sudah kita pelajari pada artikel sebelumnya, seperti:

nama warna – [red, green, blue, yellow]
kode hex – [#RRGGBB]
ruang warna RGB – rgb(R, G, B)
ruang warna HSL – hsl(H, S, L)

Contoh penerapan properti background-color dengan format nilai nama warna.


body{
   background-color: aqua;
}

Hasilnya:

KBackground Color

Sedangkan jika ingin membuat warnanya lebih transparan ada dua cara, yaitu:

menggunakan properti opacity
menggunakan alpha channel pada ruang warna RGBA atau HSLA


<!DOCTYPE html>
<html>
<head>
    <title>Belajar CSS</title>
    <style>
          #box{
                height: 100px;
                background-color: #20b2aa;
                opacity: 0.1; /* properti opacity */
          }
          #box-2{
                height: 100px;
                /* alpha channel pada rgba */
                background-color: rgba(31, 178, 170, 0.5);
          }
          #box-3{
               height: 100px;
               /* alpha channel pada hsla */
               background-color: hsla(177, 70%, 41%, 0.9);
          }
    </style>
</head>
<body>
    <div id="box"><h2>Kotak 1</h2></div>
    <div id="box-2"><h2>Kotak 2</h2></div>
    <div id="box-3"><h2>Kotak 3</h2></div>
</body>
</html>

Opacity dan Alpha Channel

Sebenarnya ruang warna RGB dan HSL juga bisa menggunakan properti opacity tanpa menambah alpha channel (RGBA dan HSLA), namun ada perbedaan hasil antara keduanya sehingga kita tidak bisa semuanya menggunakan properti opacity.

Perbedaan Opacity dan Alpha Channel

Baik properti opacity atau pun alpha channel pada ruang warna RGBA dan HSLA, keduanya memiliki rentang nilai antara 0 – 1 atau 0% – 100% dalam bentuk persentase.

Semakin mendekati 0 nilainya maka semakin transparan warnanya. Sedangkan bila semakin mendekati 1 nilainya maka semakin jelas warnanya.

Terlepas dari keduanya memiliki format nilai yang sama, keduanya juga memiliki perbedaan.

Ketika kita memutuskan menggunakan properti opacity maka child element pada elemen HTML terkait juga akan ikut menjadi transparan, ini termasuk teks di dalamnya.

Background CSS: Properti Opacity

Sedangkan jika child element HTML tidak ingin ikut menjadi transparan, maka gunakan format penulisan ruang warna RGBA atau HSLA.

Background CSS: Alpha Channel

Jadi gunakan sesuai kebutuhan kalian.

Properti Background Image CSS

Selanjutnya untuk membuat latar belakang berupa gambar kita dapat menggunakan fungsi dari properti background-image.


background-image: value;

Properti background-image memiliki beberapa bentuk nilai, salah satunya berupa url atau lokasi dari file gambar yang akan kita jadikan latar. Sedangkan untuk nilai defaultnya adalah none.

Contoh penerapan properti background-image menggunakan url sebagai nilainya.


body{
      background-image: url('sample.png');
}

Background Image CSS

Pada kode di atas berhubung gambar dan file HTML berada dalam satu folder maka langsung saja tulis nama filenya.

Terdapat beberapa ekstensi gambar yang dapat kita jadikan background seperti JPG, PNG, SVG, WEBP, GIF, dan lain-lain.

Catatan: jangan pernah menggunakan gambar yang dapat mengganggu keterbacaan teks pada website kalian.

Background Image dengan Gradasi Warna

Selain dapat menggunakan gambar, properti background-image juga dapat membuat latar dengan menggabungkan beberapa warna atau biasa kita sebut dengan gradient atau gradasi warna.


<!DOCTYPE html>
<html>
<head>
    <title>Belajar CSS</title>
    <style>
          #banner{
                   height: 150px;
                   background-image: linear-gradient(#fc4a1a, #f7b733);
          }
    </style>
</head>
<body>
    <div id="banner">
        <h2>Banner 1</h2>
    </div>
</body>
</html>

Gunakan koma untuk memisahkan setiap warna.

Background Image: Gradasi Warna

Apakah hanya bisa menggunakan 2 warna? Tidak, kita bisa gunakan lebih dari itu.

Tips untuk Propeti Background Image

Properti background-image juga bisa kita tulis bersamaan dengan background-color. Hal ini biasanya bertujuan sebagai alternatif ketika gambar pada background-image gagal dimuat.


body{
      background-color: gray;
      background-image: url('sample.png');
}

Apakah hal tersebut wajib kita lakukan?

Wajib, bila kita ingin halaman atau elemen HTML tertentu memiliki warna background selain putih. Bersifat opsional bila kita ingin background terkait berwarna apa adanya termasuk putih.

Hal ini juga berlaku ketika nilainya merupakan gradasi warna seperti contoh sebelumnya, meskipun hasilnya sama-sama warna, tidak menutup kemungkinan bila terdapat web browser yang masih belum mendukung properti background-image dengan nilai gradasi warna.


#banner{
         height: 150px;
         background-color: orange;
         background-image: linear-gradient(#fc4a1a, #f7b733);
}

Untuk urutan penulisannya terserah, boleh background-image dulu yang ditulis atau pun sebaliknya background-color dulu, yang pasti prioritas untuk ditampilkan pada halaman website adalah background-image.

Properti Background Repeat CSS

Secara default, ketika kita menggunakan gambar sebagai background, ia akan ditampilkan secara berulang dari kiri ke kanan secara horizontal dan vertikal hingga memenuhi seluruh tempat dari background suatu elemen.

ilustrasi Background Repeat

Sehingga dalam beberapa kasus hal ini tidak diperlukan. Maka dari itu untuk mengatasinya, kita perlu menggunakan yang namanya properti background-repeat.

Properti background-repeat memungkinkan kita untuk mengatur bagaimana background akan ditampilkan secara berulang.

Untuk sintaksnya ada di bawah ini.


background-repeat: value;

Penerapan background-repeat di css.


body{
      background-color: gray;
      background-image: url('sample.png');
      background-repeat: repeat;
}

Ada beberapa nilai yang dapat kita pakai dalam properti ini, namun di sini kita akan bahas 4 nilai yang penting, yaitu:

repeat, nilai default yang membuat gambar latar akan ditampilkan berulang secara horizontal dan vertikal.
repeat-x, untuk mengulang gambar latar secara horizontal.
repeat-y, untuk mengulang gambar latar secara vertikal.
no-repeat, agar gambar latar tidak tampil secara berulang.

Agar lebih mudah memahami keempat nilai di atas silahkan lihat ilustrasi di bawah ini.

Illustrasi Tiap Nilai Background Repeat

Properti Background Position CSS

Selanjutnya untuk mengatur posisi dari background kita bisa gunakan properti background-position.

Untuk sintaksnya adalah sebagai berikut.


background-position: value1 value2;

Properti ini secara default bisa menampung hingga 4 nilai namun dalam artikel ini kita akan bahas penggunaan background-position hanya dengan satu dan dua nilai saja menggunakan format nilai berupa kata kunci.

Properti background-position memiliki format penulisan nilai yang beragam antara lain:

menggunakan kata kunci seperti top, bottom, left, dan right.
format persentase: x% dan y%
format pixel: xpos dan ypos

Setiap nilainya dipisahkan dengan spasi. Sedangkan untuk nilai defaultnya adalah left top atau dalam bentuk persentase adalah x = 0%, y = 0%.

Contoh penerapan background-position:


<!DOCTYPE html>
<html>
<head>
    <title>Belajar CSS</title>
    <style>
          body{
                background-image: url('image.png');
                background-repeat: no-repeat;
                background-position: center center;
                background-attachment: fixed;
          }
    </style>
</head>
<body>
   
</body>
</html>

Background Position

Nilai dari properti background-position pada dasarnya mewakili horizontal (X) dan vertikal (Y) yang mana ketika kita isi suatu nilai dengan left atau right berarti kita sedang mendefinisikan sumbu X dan sebaliknya ketika kita isi nilainya dengan top atau bottom maka kita sedang mendefinisikan sumbu Y.

Jangan pernah menulis nilainya dengan arah yang saling berlawanan misal left right atau bottom top. Karena ini tidak valid.

Khusus nilai berupa keyword, untuk urutan penulisan nilainya boleh bolak-balik, misalnya right top atau top right, tidak jadi masalah karena browser sendiri yang akan menyesuaikannya dan hasilnya pun akan tetap sama.

Selain itu, pada dasarnya kita juga dapat mendefinisikan properti background-position dengan hanya menuliskan satu nilai saja, yang mana ketika hal ini kita lakukan maka nilai yang kedua secara otomatis akan dianggap bernilai center, terlepas dari apapun nilai yang pertama.


background-position: value1; 
/* = background-position: value1 center */

Untuk mengetahui masing-masing penerapan nilai, bisa lihat ilustrasi berikut.

Ilustrasi Tiap Nilai Background Position

Properti Background Attachment CSS

Setelah mengatur posisi background, sekarang kita coba untuk menetapkan posisinya, maksud menetapkan di sini adalah kita dapat menentukan apakah posisi gambar latar akan berada tetap di posisinya atau berpindah ketika kita gulir.

Illustrasi Nilai Background Attachment

Dalam kasus ini kita menggunakan properti background-attachment. Sintaks dari background-attachment adalah sebagai berikut:


background-attachment: value;

Setelah itu kita akan coba tes dengan dua nilai pada background-attachment, yang pertama adalah nilai scroll.


<!DOCTYPE html>
<html>
<head>
    <title>Belajar CSS</title>
    <style>
       body{
             background-color: #20b2aa;
             background-image: url('kopi.png');
             background-repeat: no-repeat;
             background-attachment: scroll;
       }
    </style>
</head>
<body>
    <div id="banner">
       <p>Properti background-image dengan nilai scroll dan fixed. Coba scroll ke 
       bawah</p>
       <!-- salin sebanyak mungkin hingga di samping kanan browser muncul scroll -->
    </div>
</body>
</html>

Nilai scroll merupakan nilai default dari background-attachment. Nilai ini tidak akan membuat background ikut terbawa ketika kita gulir, alias ia akan tetap berada di posisi awalnya.

Background Attachment: Scroll

Kedua nilai fixed. Nilai ini akan membuat background gambar ikut turun dan naik mengikuti arah gulir.


body{
    background-color: #20b2aa;
    background-image: url('kopi.png');
    background-repeat: no-repeat;
    background-attachment: fixed; /* ubah nilai */
}

Background Attachment: Fixed

Properti Background (Shorthand) CSS

Sebenarnya dalam CSS ada suatu teknik yang berguna untuk mempersingkat penulisan nilai dari beberapa properti yang sejenis. Teknik ini dinamakan shorthand. Sedangkan properti yang memiliki kemampuan ini biasa disebut shorthand property.

Properti shorthand memungkinkan kita mendeklarasikan atau menetapkan banyak nilai dari beberapa properti yang berbeda ke dalam satu properti. Dengan syarat properti-properti tersebut masih satu tipe.


background: bg-color bg-image position/bg-size bg-repeat bg-origin bg-clip bg-attachment

Hanya beberapa properti saja yang memiliki kelebihan seperti ini, salah satunya adalah properti background.

Jadi simpelnya, kita dapat menyederhanakan beberapa baris pendeklarasian beberapa properti seperti ini:


body{
      background-color: #ffffff;
      background-image: url('sample.png');
      background-repeat: no-repeat;
      background-attachment: fixed;
      background-position: right top;
}

menjadi seperti ini, hanya satu baris menggunakan background.


body{
      background: #ffffff url('sample.png') no-repeat fixed right top;
}

Properti background menampung nilai-nilai dari properti keluarga background itu sendiri seperti:

background-color
background-image
background-size
background-repeat
background-origin
background-clip
background-attachment

Dalam penerapannya kita tidak wajib menulis semua nilai properti di atas secara lengkap, jika kita hanya butuh beberapa properti tulis saja nilainya sejumlah properti yang kita butuhkan. Sedangkan untuk yang tidak terdefinisi nantinya akan secara otomatis terisi nilai defaultnya.

Misal kita tidak menyertakan nilai dari background-color, maka secara otomatis pada properti background akan ditetapkan nilai dari background-color sebagai transparent, yaitu nilai defaultnya.

Selain itu, kita juga boleh menulis nilai masing-masing properti secara tidak urut, hanya saja perlu kita perhatikan lagi terutama pada properti yang memiliki lebih dari satu nilai misal background-properti, kita tidak boleh menulisnya secara terpisah seperti ini:


body{
      background: #ffffff url('sample.png') right no-repeat bottom;
}

Hal ini nantinya akan menyebabkan masalah pada keseluruhan blok deklarasi. Sehingga browser tidak akan menjalankannya karena dianggap tidak valid. Jadi kita harus menuliskannya secara berdampingan sebagaimana mestinya kita menulis nilai dari background-position.


body{
      background: #ffffff url('sample.png') no-repeat right bottom;
}

Pendinginan

Hari ini kita selesai mempelajari banyak hal dasar mengenai properti background di CSS, mulai dari bagaimana membuatnya hingga mengaturnya.

Lantas, materi apa yang akan kita pelajari pada artikel berikutnya?

Materi yang akan kita pelajari pada artikel berikutnya adalah mengenai Font di CSS. Jadi sampai bertemu di artikel berikutnya!

Referensi

[1] Opacity - Mozilla Developer Network (MDN)
[2] Background Position - Moziila Developer Network (MDN)
[3] Background Shorthand - Mozilla Developer Network (MDN)
[4] CSS Background - Tutorial Republic

Apa HTML yang benar untuk memasukkan gambar latar belakang?

Tikkan <div style="background-image: url('[image url]');"> di baris berikutnya. Inilah label HTML untuk menambahkan gambar latar belakang pada halaman web. Ganti "[image url]" dengan lokasi URL asli dari gambar yang diinginkan.

Properti apa yang digunakan untuk latar belakang warna pada CSS?

2. Background-Color Sesuai dengan namanya, Properti background-color pada CSS merupakan properti yang bisa Anda gunakan khusus untuk mengatur pewarnaaan dari suatu latar belakang pada selector(elemen html).

Apa itu background image?

background-image adalah teknik pada css untuk menampilkan gambar menjadi latar belakang alias background, baik itu pattern maupun gambar ukuran penuh.

Apa itu background repeat?

Background repeat Properti background-repeat berfungsi untuk mengatur apakah background image yang kita terapkan akan ditampilkan secara berulang atau hanya sekali atau satu buah gambar saja.

kode css Contoh CSS image Background CSS keren