CSS Background Property
haii guyss hari ini saya akan share penggunaan Background pada CSS,
Background pada CSS digunakan memberikan efek warna,gambar pada element sebuah web atau CSS,
sebelumnya kita sudah belajar tentang properti dan selector,dalam CSS properti pada background adalah :
- background-color
- background-repeat
- background-image
- background-position
1.background-color
berfungsi untuk memberikan efek warna pada element,dibawah ini penggunaan background-color :
body{
background-color : red ;
}
maka tampilannya akan seperti ini :
 |
| background-color : red; |
pada gambar diatas kita memberikan efek pada element background-color dengan warna merah,maka tampilan element pada web kita akan berwarna merah,value pada background-color ada banyak sekali warna,bisa kalian gunakan sesuka hati kalian.
2.background-repeat
properti berfungsi untuk membuat pengulangan dari gambar yang kita ambil dari properti background-image.pengulangannya bisa secara vertikal maupun horizontal
perhatikan contoh dibawah ini.
ini adalah sintaksnya :
background-image:url("Resized/a3.jpg");
background-repeat: repeat-x;
ini merupakan contoh repeat-y:
dan ini merupakan contoh repeat-x :
pada kedua gambar diatas kita bisa menyimpulkan bahwa pengulangan gambarnya harus sesuai dengan tinggi margin pada element .
3.background-image
properti ini berfungsi untuk menyisipkan atau menambahkan gambar pada element CSS,
cara menambahkan gambar,ini adalah contoh sintaksnya :
background-image:url("Resized/a3.jpg");
perhatikan contoh berikut :
4.background-position
properti berfungsi untuk mengatur posisi gambar yang ingin kita sisipkan atau kita tambahkan pada element CSS.
ini contoh sintaksnya :
background-position : right top ;
coba perhatikan gambar dibawah ini :
pada sintaksnya menjelsakan bahwa posisi gambar adalah kanan atas,maka jika kita eksekusi maka gambar pada element berada pada sebelah kanan atas :)
kamu bisa memodifikasi sintak-sintaks tersebut sesuai keinginan kamu,
selamat mencoba,semoga berhasil :)
Gbu :)