Belajar 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
background image repeat css


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

background image repeat-x css


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
background image repeat-y css

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 
background image no-repeat css

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

background position top css

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

background position bottom css

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

background position left css

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

background position right css


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
background position center css

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
background position top left css


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
background position top right css


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
background position bottom left css


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

background position bottom right css


10. inherit


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

Contoh output gambar hasil kode diatas

background position inherit css


11. initial


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

Contoh output gambar hasil kode diatas

background position initial css


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

background position top 10px left 20px css


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

background position top 10px right 20px css


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

background position bottom 10px left 20px css


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
background position bottom 10px right 20px css

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.

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

Berlangganan update artikel terbaru via email:

0 Response to "Belajar css background lengkap dengan penjelasan"

Post a Comment

Harap berlomentar dengan sopan ya

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel

/>