Belajar css 5: css background untuk latar belakang elemen

CSS background adalah salah satu topik yang menarik untuk dipelajari dalam desain web, karena memungkinkan kita untuk mengatur latar belakang elemen HTML dengan berbagai cara, seperti memberikan warna, gambar, atau pola yang sesuai dengan tema web kita.

Pada artikel ini, kita akan mempelajari properti-properti CSS yang berkaitan dengan latar belakang elemen HTML.

CSS Background

CSS memiliki berbagai properti yang dapat digunakan untuk mengatur tampilan latar belakang elemen.

Dengan properti background pada CSS, kita dapat memberikan warna, gambar, atau pola yang sesuai dengan keinginan kita pada elemen.

Kita juga dapat menyesuaikan ukuran, posisi, pengulangan, dan penempelan gambar atau warna latar belakang dengan properti-properti CSS lainnya.

Beberapa properti background CSS yang sering digunakan adalah:

1. background-color: memberikan warna latar belakang pada elemen menggunakan nama warna, kode heksadesimal, atau nilai RGB untuk menentukan warna yang diinginkan.
2. background-image: menampilkan gambar sebagai latar belakang elemen menggunakan URL gambar atau fungsi CSS seperti linear-gradient atau radial-gradient untuk menentukan gambar yang diinginkan.
3. background-repeat: mengatur bagaimana gambar latar belakang diulang atau ditampilkan pada elemen menggunakan nilai seperti no-repeat, repeat-x, repeat-y, atau space untuk menentukan pengulangan gambar yang diinginkan.
4. background-attachment: mengatur bagaimana gambar latar belakang bergerak bersama dengan elemen atau tetap pada posisinya saat halaman digulir menggunakan nilai seperti scroll, fixed, atau local untuk menentukan penempelan gambar yang diinginkan.
5. background-position: mengatur posisi gambar latar belakang pada elemen menggunakan nilai seperti left, right, top, bottom, center, atau persentase untuk menentukan posisi gambar yang diinginkan.

Untuk dapat lebih memahami penjelasan dan serta contoh dari penggunaan ke 5 properti diatas, mari simak pembahasannya dibawah ini:

1. Properti background color

properti ini (background-color) digunakan untuk menentukan warna latar belakang elemen dengan menggunakan nilai warna CSS yang valid.

Nilai warna CSS dapat berupa nama warna, kode heksadesimal, atau nilai RGB.

Contoh kode CSS berikut menunjukkan cara mengatur warna latar belakang elemen body, h1, p, dan div dengan menggunakan properti background-color.

body { 
/* memberikan warna kuning pada latar belakang halaman web */ 
background-color: yellow; 
}

h1 { 
/* memberikan warna emas pada latar belakang elemen h1 */ 
background-color: gold; 
}

p { 
/* memberikan warna merah muda pada latar belakang elemen p */ 
background-color: pink; 
}

div { 
/* memberikan warna hijau pada latar belakang elemen div */ 
background-color: green; 
/* menentukan lebar dan tinggi elemen div */ 
width: 200px; 
height: 200px; 
}

2. Properti background image

Properti background-image: properti ini digunakan untuk menentukan satu atau lebih gambar sebagai latar belakang elemen web.

Nilai properti ini harus berupa URL gambar yang valid, yang dapat ditulis dengan atau tanpa tanda kutip.

Contoh: url(“image.jpg”), url(‘image.jpg’), atau url(image.jpg).

Teks image.jpg adalah lokasi file gambar yang akan dibaca oleh web browser dan ditampilkan sebagai latar belakang elemen.

Contoh lain:

body { 
/* menampilkan gambar staykoding.jpg dari folder images sebagai latar belakang halaman web */ 
background-image: url(“images/staykoding.jpg”); 
}

Perhatian! Hindari menggunakan warna latar belakang atau gambar yang dapat mengganggu keterbacaan teks di halaman web. Pastikan teks tetap mudah dibaca oleh pengunjung web.

3. Properti background image repeat

Properti background-repeat: properti ini digunakan untuk mengatur cara pengulangan gambar latar belakang elemen web.

Secara default, CSS akan mengulang gambar latar belakang secara horizontal dan vertikal, sehingga gambar akan menutupi seluruh area elemen.

Lihat contoh kode dan hasilnya di bawah ini.

body {
/* menampilkan gambar staykoding.jpg dari folder images sebagai latar belakang halaman web */
background-image: url("images/staykoding.jpg");
}

Hasil outputnya

Jika kita ingin mengatur gambar latar belakang hanya berulang secara horizontal atau vertikal, kita dapat menggunakan nilai repeat-x atau repeat-y pada properti background-repeat. 

Nilai repeat-x berarti gambar akan diulang sepanjang sumbu x (kiri-kanan), sedangkan nilai repeat-y berarti gambar akan diulang sepanjang sumbu y (atas-bawah). 

Lihat contoh kode dan hasilnya di bawah ini.

body {
/* menampilkan gambar staykoding.jpg dari folder images sebagai latar belakang halaman web */
background-image: url(“images/staykoding.jpg”);
/* mengatur gambar hanya berulang secara horizontal */
background-repeat: repeat-x;
}

Hasil outputnya

Contoh kode:

body {
/* menampilkan gambar staykoding.jpg dari folder images sebagai latar belakang halaman web */
background-image: url(“images/staykoding.jpg”);
/* mengatur gambar hanya berulang secara vertikal */
background-repeat: repeat-y;
}

Hasil output gambar

4. Properti background image no-repeat

Properti background-repeat: no-repeat: properti ini digunakan untuk menampilkan gambar latar belakang elemen web tanpa mengulangnya. 

Nilai no-repeat berarti gambar akan ditampilkan sekali saja pada posisi default (kiri atas) elemen. 

Jika ukuran gambar lebih kecil dari ukuran elemen, maka akan ada ruang kosong pada latar belakang elemen. 

Lihat contoh kode dan hasilnya di bawah ini.

body { 
/* menampilkan gambar staykoding.jpg dari folder images sebagai latar belakang halaman web */ 
background-image: url(“images/staykoding.jpg”); 
/* menghentikan pengulangan gambar */ 
background-repeat: no-repeat; 
}

Hasil outputnya 

5. Properti background image position

Properti background-position: properti ini digunakan untuk menentukan posisi awal gambar latar belakang elemen web.

Nilai properti ini dapat berupa kata kunci seperti top, bottom, left, right, center, atau nilai offset tepi seperti persentase, piksel, atau satuan lainnya. Nilai offset tepi berarti jarak gambar dari tepi elemen. 

Baiklah agar lebih memahami, berikut penggunaan nilai pada properti background-position.

1. Menggunakan satu nilai

1. top

nilai top berarti gambar akan diletakkan di bagian atas elemen, dengan posisi horizontal default (kiri).

body {
/* menampilkan gambar staykoding.jpg dari folder images sebagai latar belakang halaman web */
background-image: url(“images/staykoding.jpg”);
/* menghentikan pengulangan gambar */
background-repeat: no-repeat;
/* menempatkan gambar di bagian atas elemen */
background-position: top;
}

Contoh output gambar hasil kode diatas

2. bottom

nilai bottom berarti gambar akan diletakkan di bagian bawah elemen, dengan posisi horizontal default (kiri).

body {
/* menampilkan gambar staykoding.png dari folder images sebagai latar belakang halaman web */
background-image: url(“images/staykoding.png”);
/* menghentikan pengulangan gambar */
background-repeat: no-repeat;
/* menempatkan gambar di bagian bawah elemen */
background-position: bottom;
}

Contoh output gambar hasil kode diatas

3. left

nilai left berarti gambar akan diletakkan di bagian kiri elemen, dengan posisi vertikal default (atas).

body { 
/* menampilkan gambar sunflower dari folder images sebagai latar belakang halaman web */
background-image: url("images/small-sunflower.png"); 
/* menghentikan pengulangan gambar */
background-repeat: no-repeat; 
/* menempatkan gambar di bagian kiri elemen */
background-position: left; 
}

Contoh output gambar hasil kode diatas

4. right

nilai ini berarti gambar akan diletakkan di bagian kanan elemen, dengan posisi vertikal default (atas).

body { 
/* menampilkan gambar small-sunflower.png dari folder images sebagai latar belakang halaman web */ 
background-image: url("images/small-sunflower.png"); 
/* menghentikan pengulangan gambar */
background-repeat: no-repeat; 
/* menempatkan gambar di bagian kanan elemen */
background-position: right; 
}

Contoh output gambar hasil kode diatas

5. center

nilai ini berarti gambar akan diletakkan di tengah elemen, baik secara horizontal maupun vertikal.

body { 
/* menampilkan gambar small-sunflower.png dari folder images sebagai latar belakang halaman web */ 
background-image: url("images/small-sunflower.png"); 
/* menghentikan pengulangan gambar */ 
background-repeat: no-repeat; 
/* menempatkan gambar di tengah elemen */
background-position: center; 
}

Contoh output gambar hasil kode diatas

6. inherit

nilai ini berarti gambar akan mewarisi posisi latar belakang dari elemen induknya. Jika elemen induk tidak memiliki posisi latar belakang yang ditentukan, maka gambar akan menggunakan posisi default (kiri atas).

body { 
/* menampilkan gambar small-sunflower.png dari folder images sebagai latar belakang halaman web */ 
background-image: url("images/small-sunflower.png"); 
/* menghentikan pengulangan gambar */ 
background-repeat: no-repeat; 
/* menempatkan gambar di posisi yang sama dengan elemen induk */
background-position: inherit; 
}

Contoh output gambar hasil kode diatas

7. initial

nilai ini berarti gambar akan menggunakan posisi latar belakang awal yang ditentukan oleh CSS, yaitu kiri atas.

body { 
/* menampilkan gambar small-sunflower.png dari folder images sebagai latar belakang halaman web */ 
background-image: url("images/small-sunflower.png"); 
/* menghentikan pengulangan gambar */
background-repeat: no-repeat; 
/* menempatkan gambar di posisi awal CSS */
background-position: initial; 
}

Contoh output gambar hasil kode diatas

2. Menggunakan dua nilai atau lebih

Selain menggunakan satu nilai, kita juga dapat menggunakan dua nilai sekaligus untuk menentukan posisi horizontal dan vertikal gambar. 

Contoh kode dan hasilnya adalah sebagai berikut.

1. top left

nilai ini berarti gambar akan diletakkan di sudut kiri atas elemen.

body { 
/* menampilkan gambar small-sunflower.png dari folder images sebagai latar belakang halaman web */ 
background-image: url("images/small-sunflower.png"); 
/* menghentikan pengulangan gambar */ 
background-repeat: no-repeat; 
/* menempatkan gambar di sudut kiri atas elemen */
background-position: top left; 
}

Contoh output gambar hasil kode diatas

2. top right

nilai ini berarti gambar akan diletakkan di sudut kanan atas elemen.

body { 
/* menampilkan gambar small-sunflower.png dari folder images sebagai latar belakang halaman web */ 
background-image: url("images/small-sunflower.png"); 
/* menghentikan pengulangan gambar */ 
background-repeat: no-repeat; 
/* menempatkan gambar di sudut kanan atas elemen */
background-position: top right; 
}

Contoh output gambar hasil kode diatas

3. bottom left

nilai ini berarti gambar akan diletakkan di sudut kiri bawah elemen.

body { 
/* menampilkan gambar small-sunflower.png dari folder images sebagai latar belakang halaman web */ 
background-image: url("images/small-sunflower.png"); 
/* menghentikan pengulangan gambar */ 
background-repeat: no-repeat; 
/* menempatkan gambar di sudut kiri bawah elemen */
background-position: bottom left; 
}

Contoh output gambar hasil kode diatas

4. bottom right

nilai ini berarti gambar akan diletakkan di sudut kanan bawah elemen.

body { 
/* menampilkan gambar small-sunflower.png dari folder images sebagai latar belakang halaman web */ 
background-image: url("images/small-sunflower.png"); 
/* menghentikan pengulangan gambar */ 
background-repeat: no-repeat; 
/* menempatkan gambar di sudut kanan bawah elemen */
background-position: bottom right; 
}

Contoh output gambar hasil kode diatas

5. top 10px left 20px

Ketika kita mensetting background-position sebuah gambar menjadi top 10px left 20px maka yang terjadi gambar berada tepat di kiri dengan padding 20px dan di atas dengan padding 10px.

body { 
background-image: url("images/small-sunflower.png"); 
background-repeat: no-repeat; 
background-position: top 10px left 20px; }

Contoh output gambar hasil kode diatas

6. top 10px right 20px

Ketika kita mensetting background-position sebuah gambar menjadi top 10px left 20px maka yang terjadi gambar berada tepat di kanan dengan padding 20px dan di atas dengan padding 10px.

body { 
background-image: url("images/small-sunflower.png"); 
background-repeat: no-repeat; 
background-position: top 10px right 20px; 
}

Contoh output gambar hasil kode diatas

7. bottom 10px left 20px

Ketika kita mensetting background-position sebuah gambar menjadi top 10px left 20px maka yang terjadi gambar berada tepat di kiri dengan padding 20px dan di bawah dengan padding 10px.

body { 
background-image: url("images/small-sunflower.png"); 
background-repeat: no-repeat; 
background-position: bottom 10px left 20px; 
}

Contoh output gambar hasil kode diatas

8. bottom 10px right 20px

Ketika kita mensetting background-position sebuah gambar menjadi top 10px left 20px maka yang terjadi gambar berada tepat di kanan dengan padding 20px dan di atas dengan padding 10px.

body { 
background-image: url("images/small-sunflower.png"); 
background-repeat: no-repeat; 
background-position: bottom 10px right 20px; 
}

Contoh output gambar hasil kode diatas

6. Properti background-attachment

Properti background-attachment CSS: properti ini digunakan untuk mengatur bagaimana gambar latar belakang elemen web bergerak saat halaman web digulir. Nilai properti ini dapat berupa kata kunci seperti scroll, fixed, local, atau kombinasi dari dua nilai tersebut. Berikut adalah penjelasan dan contoh dari masing-masing nilai.

• scroll: nilai ini berarti gambar latar belakang akan tetap pada posisinya relatif terhadap elemen, dan tidak akan bergulir bersama dengan konten elemen. Contoh kode dan hasilnya adalah sebagai berikut.

body {
  /* menampilkan gambar staykoding.jpg dari folder images sebagai latar belakang halaman web */
  background-image: url("images/staykoding.jpg");
  /* mengatur gambar latar belakang tetap pada posisinya relatif terhadap elemen */
  background-attachment: scroll;
}

Hasil outputnya

• fixed: nilai ini berarti gambar latar belakang akan tetap pada posisinya relatif terhadap viewport (layar browser), dan akan bergulir bersama dengan halaman web. Contoh kode dan hasilnya adalah sebagai berikut.

body {
  /* menampilkan gambar staykoding.jpg dari folder images sebagai latar belakang halaman web */
  background-image: url("images/staykoding.jpg");
  /* mengatur gambar latar belakang tetap pada posisinya relatif terhadap viewport */
  background-attachment: fixed;
}

Hasil outputnya

• local: nilai ini berarti gambar latar belakang akan bergulir bersama dengan konten elemen, dan posisi gambar akan relatif terhadap area elemen yang dapat digulir. Contoh kode dan hasilnya adalah sebagai berikut.

div {
  /* menampilkan gambar staykoding.jpg dari folder images sebagai latar belakang elemen div */
  background-image: url("images/staykoding.jpg");
  /* mengatur gambar latar belakang bergulir bersama dengan konten elemen div */
  background-attachment: local;
  /* menentukan lebar, tinggi, dan overflow elemen div */
  width: 300px;
  height: 300px;
  overflow: auto;
}

Hasil outputnya

• scroll, local atau local, scroll: nilai ini berarti gambar latar belakang akan menggunakan nilai scroll untuk sumbu horizontal dan nilai local untuk sumbu vertikal, atau sebaliknya. Contoh kode dan hasilnya adalah sebagai berikut.

div {
  /* menampilkan gambar staykoding.jpg dari folder images sebagai latar belakang elemen div */
  background-image: url("images/staykoding.jpg");
  /* mengatur gambar latar belakang menggunakan nilai scroll untuk sumbu horizontal dan nilai local untuk sumbu vertikal */
  background-attachment: scroll, local;
  /* menentukan lebar, tinggi, dan overflow elemen div */
  width: 300px;
  height: 300px;
  overflow: auto;
}

Hasil outputnya

7. Properti Background - Shorthand Property

Kita dapat menentukan semua properti latar belakang css hanya dengan satu properti tunggal saja yaitu menggunakan properti singkatannya.

Properti background itulah yang merupakan singkatan dari properti css berikut:

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

Sebagai contoh kita mempunyai kode css yang menggunakan semua properti diatas, seperti kode css dibawah ini

body {
background-color: red;
background-image: ("images/staykoding.jpg");
background-repeat: no-repeat;
background-attachment: fixed;
background-position: top right;
}

dapat dilihat kode css diatas ditulis dengan banyak properti sekaligus. Nah dengan menggunakan properti background saja, kode cssnya dapat diperpendek(shorthand) menjadi seperti ini

body {
background: red url("images/staykoding.jpg") no-repeat fixed top right;
}

Catatan ! kamu dapat menghilangkan nilai. Nilai yang dihilangkan pada kodingan shorthand background diatas akan diatur ke nilai awalnya kembali (default).

Kesimpulan

Properti background css adalah salah satu properti yang penting untuk mengatur latar belakang elemen HTML. 

Dengan properti background css, kamu bisa memberikan warna, gambar, atau kombinasi keduanya untuk latar belakang elemen HTML. 

Kamu juga bisa mengatur ukuran, posisi, pengulangan, dan asal gambar dengan properti background css. 

Properti background css sangat berguna untuk membuat tampilan web yang menarik dan sesuai dengan keinginan kamu. 

Belajar properti background css tidaklah sulit, asalkan kamu memahami nilai-nilai yang bisa diberikan untuk properti background css dan melihat contoh-contoh kode dan hasilnya.

Gimana nih sobat? Gampang dan mudahkan belajar mengenai properti background css? Semoga artikel ini bermanfaat ya buat kamu yang sedang belajar properti background css ini.

Share dan bagikan artikel ini jika kamu merasa artikel ini bermanfaat. And see you in the next article.

Selanjutnya Belajar Apa?

Di part selanjutnya, kita akan mempelajari tentang box model di css. Kita akan belajar apa itu box model? bagaimana penerapannya, serta mengapa ini penting untuk dipelajari bagi pemula.

Pelajari : 📖 Belajar CSS 6: Box Model di CSS