Belajar css #4 css background lengkap dengan penjelasan

Pada pembelajaran kali ini kita akan belajar mengenai css background.

Dalam artian kita akan belajar tentang background pada css yang berkaitan dengan latar belakang suatu elemen di html.

CSS Background

Background pada css merupakan properti-properti yang ada pada css yaitu bagaimana latar belakang pada elemen tersebut dapat kita isi/ ubah menjadi mempunyai warna serta gambar, atau potongan clip yang dapat diubah ukurannya, sekaligus dapat dimodifikasi latar belakangnya dengan properti-properti background di css.

Untuk itu background/latar belakang pada css memiliki beberapa properti yang dapat digunakan, diantaranya.

1. background-color 
2. background-image
3. background-repeat
4. background-attachment
5. background-position

1. Properti background color

Kita dapat menentukan warna latar belakang sebuah elemen menggunakan properti background-color.

Nilainya sendiri dapat berupa warna css atau warna css 3 yang valid.

Maksudnya adalah properti background-color ini menggunakan nilai yang digunakan untuk merubah warna latar belakang suatu elemennya.

Berikut contoh kode css untuk mengubah warna latar belakang(background) elemen body di halaman website.

body {
  background-color: yellow;
}

Contoh kode css untuk mengubah warna latar belakang sebuah elemen

/* elemen h1 */
h1 {
  background-color: gold;
}

/* elemen p */
p {
  background-color: pink;
}

/* elemen div */
div {
  background-color: green;
  width: 200px;
  height: 200px;
}

2. Properti background image

Properti background-image berguna untuk mengatur satu atau lebih gambar sebagai latar belakang dari sebuah elemen website.

Formatnya adalah pada nilainya harus seperti berikut: url("image.jpg"). 

Bisa juga menggunakan satu tanda kutip atau tidak sama sekali itu sama saja tetap akan bekerja dengan baik.

Sebagai contoh menggunakan satu tanda kutip: url('image.jpg') serta tanpa tanda kutip: url(image.jpg).

Teks image.jpg merupakan jalur file yang nantinya akan dibaca oleh web browser sehingga gambar tersebut dapat ditampilkan.

Contoh lain 

body {  
  /* images adalah folder, staykoding.jpg adalah nama file gambar */
  background-image: url("images/staykoding.jpg");
}

Diatas merupakan kode css dengan jalur file untuk pemanggilan gambar berada di folder images.

Catatan! Jangan gunakan warna latar belakang atau gambar apa pun yang akan mengganggu teks di halaman web kamu. Selalu buat semuanya mudah dibaca.

3. Properti background image repeat

Kita tak perlu mengatur properti background-image menjadi repeat,  karena CSS secara otomatis mengatur ulang gambar latar belakang secara horizontal dan vertikal.

Lihatlah contoh di bawah ini.

body {
  background-image: url("images/staykoding.jpg");
}

Hasil outputnya

Apabila kita mau mengatur sebuah gambar latar belakang mengulang  secara horizontal atau vertikal kita dapat menggunakan properti background-repeat. 

Untuk gambar latar belakang yang tampil secara berulang secara horizontal, kita dapat menggunakan nilai repeat-x pada properti background-repeatnya.

Contoh kode css:

body {
  background-image: url("images/staykoding.jpg");
  background-repeat: repeat-x;
}

Hasil outputnya

Untuk gambar latar belakang yang berulang secara vertikal, kita menggunakan nilai repeat-y.

Contoh kode:

body {
   background-image: url("images/staykoding.jpg");
   background-repeat: repeat-y;
}

Hasil output gambar

4. Properti background image no-repeat

Nilai no-repeat dari properti background-repeat berguna untuk menghentikan gambar latar dari tampilan yang terjadi secara berulang.

Contoh kode css

body {
   background-image: url("images/staykoding.jpg");
   background-repeat: no-repeat;
}

Hasil outputnya 

5. Properti background image set position

Ketika kita ingin mengatur letak atau posisi daipada suatu gambar. Kita dapat mengatur posisi awal gambar latar belakang tersebut ketika pertama kali muncul dengan menggunakan properti background-position.

Nilai atau value yang digunakan untuk mengatur posisinya adalah sebagai berikut

• top
• bottom
• left
• right
• center
• <persentage>
• nilai offset tepi
• inherit
• initial
• unset

Untuk contoh penggunaan dari nilai yang digunakan pada background-position diatas dapat dilakukan dengan beberapa contoh dibawah ini

1. top

Ketika kita mensetting background-position menjadi top maka yang terjadi, gambar berada tepat diatas tampilan halaman website.

body {
   background-image: url("images/staykoding.jpg");
   background-repeat: no-repeat;
   background-position: top;
}

Contoh output gambar hasil kode diatas

2. bottom

Ketika kita menset background-position sebuah gambar ke bottom maka yang terjadi gambar berada tepat dibawah tampilan halaman website.

body {
   background-image: url("images/staykoding.png");
   background-repeat: no-repeat;
   background-position: bottom;
}

Contoh output gambar hasil kode diatas

3. left

Ketika kita menset background-position sebuah gambar menjadi left maka yang terjadi gambar berada tepat dikiri tampilan halaman website.

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

Contoh output gambar hasil kode diatas

4. right

Ketika kita mensetting background-position sebuah gambar menjadi right maka yang terjadi gambar berada tepat dikanan tampilan halaman website.

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

Contoh output gambar hasil kode diatas

5. center

Ketika kita menset background-position sebuah gambar menjadi center maka yang terjadi gambar berada tepat ditengah tampilan halaman website.

body {
   background-image: url("images/small-sunflower.png");
   background-repeat: no-repeat;
   background-position: center;
}

Contoh output gambar hasil kode diatas

6. top left

Ketika kita mensetting background-position sebuah gambar menjadi top left maka yang terjadi gambar berada tepat di kiri atas tampilan halaman website.

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

Contoh output gambar hasil kode diatas

7. top right

Ketika kita mensetting background-position sebuah gambar menjadi top right maka yang terjadi gambar berada tepat di kanan atas tampilan halaman website.

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

Contoh output gambar hasil kode diatas




8. bottom left

Ketika kita mensetting background-position sebuah gambar menjadi bottom left maka yang terjadi gambar berada tepat di kiri bawah tampilan halaman website.

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

Contoh output gambar hasil kode diatas

9. bottom right

Ketika kita mensetting background-position sebuah gambar menjadi bottom right maka yang terjadi gambar berada tepat

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

Contoh output gambar hasil kode diatas

10. inherit

body {
   background-image: url("images/small-sunflower.png");
   background-repeat: no-repeat;
   background-position: inherit;
}

Contoh output gambar hasil kode diatas

11. initial

body {
   background-image: url("images/small-sunflower.png");
   background-repeat: no-repeat;
   background-position: initial;
}

Contoh output gambar hasil kode diatas

12. 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

13. 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

14. 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

15. 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 pada css berfungsi untuk mengatur apakah posisi gambar latar belakang berada tetap di dalam tampilan halaman website, atau dapat bergulir ketika kita sedang menscrolling sebuah halaman website.

nilai yang biasanya digunakan diantaranya

• Scroll : latar belakang berada relatif terhadap elemen itu sendiri serta tidak dapat bergulir dengan isinya.
• Fixed : latar belakang berada relatif terhadap viewport. Bahkan apabila suatu elemen digeser atau discroll sekalipun, latar belakang akan tetap berada pada posisinya beserta dengan elemen tersebut.
• local : latar belakang berada relatif terhadap kontent elemen. jika elemen tersebut dapat digulir, maka latar belakang akan bergulir dengan kontent elemen, dan area pengecatan laar belakang serta posisi area latar belakang relatif terhadap are elemen yang dapat digulir.
• scroll, local
• local, scroll

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 kodinga shorthand background diatas akan diatur ke nilai awalnya kembali.

Gimana nih sobat ? , gampang dan mudahkan belajar mengenai css background. semoga bermanfaat ya buat kamu yang sedang belajar properti background css ini.

Baca juga : Belajar css #5 CSS Border

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