body{
background:red;
}
Cara Ke 2 ( Tidak Singkat ) :
body{
background-color:red;
}
Yang Di Beri Tanda WarnaMerahGanti Dengan Warna AtauKode WarnaYg Kalian Mau
Kode WarnaItu Apa Sih??? Kode Warna Itu Seperti Ini Misal :#000
Yg #000 Itu Berwarna Hitam Jika Kode Warna Putih#FFF. Jika Ingin Kode Warna Yg Lain Silahkan Cari Di Google Atau Disini
Background ImagePasti Sudah Tau KanBackground ImageItu Apa. Yg Belum Tau Saya Kasih Tau
Background Image Berfungsi Untuk Memberi Gambar Pada Background Element Tersebut
Contoh Background Image
Cara Penulisannya Ada 2 Cara Singkat Dan Sebaliknya :
Cara Ke 1 ( Singkat ) :
body{
background:url(URL image) ;
}
Cara Ke 2 ( Tidak Singkat ) :
body{
background-image:url(URL Image) ;
}
Masukan Url Gambar Kamu DiURL image, Misal :
background-image:url( https://lh6.googleuse rcontent.com /-iFKYJoWLkuc /U_xBTnUDbSI /AAAAAAAAAGo /jTpmYLGTrJg/w140- h140-p /Background.png);
Ingat Yg Di Beri Warna Merah Jangan Di Hapus. Dan Harus Di Awali DenganHTTPAtauHTTPSAtauWWW
Background SizeBackground SizeItu Berfungsi Untuk Mengecilkan Atau Membesarkan Background Image.
Cara Penulisannya Ada 1 Tidak Singkat :
body{
background-size:350px250px;
}
Yang Di Beri WarnaMerahItu Untuk Mengatur Width Atau Panjangnya Background Image Tersebut
Yang Di Beri WarnaHijauItu Untuk Mengatur Tinggi Pada Background Image Tersebut
Jika Ingin Full Atau Pas Dalam Mengatur Background Image Begini :
body{
background-size:100% 100%;
}
Background RepeatBackground RepeatYaitu Untuk Mempebanyak Gambar Background Jika Gambar Tersebut Kecil Dan Untuk Membuat Gambar Itu Menjadi Besar Jika Gambar Itu Kecil Baik Vertikal Atau Pun Horizontal
Ada 3 Properti Pada Background Repeat :
Repeat-y ( Mengulang Gambar Background Secara Vertikal Atau Dari Atas Ke Bawah )
Repeat-x ( Mengulang Gambar Background Secara Horizontal Atau Dari Kiri Ke Kanan )
No-repeat ( Membuat Gambar Tidak Mengulang Atau Tunggal )
Dan Cara Penulisan :
body{
background-repeat:repeat-x;
}
body{
background-repeat:repeat-y;
}
body{
background-repeat:no-repeat;
}
Jika Ingin Di Gabungkan Silahkan Lihat BagianBackground Position
Background PositionBackground Position
Yaitu Untuk Mengatur Posisi Background Image Pada Element Tersebut
Ada 5 Value Dalam Background Position, Yaitu :
1. TOP ( Atas )
2. BOTTOM ( Bawah )
3. LEFT ( Kiri )
4. RIGHT ( Kanan )
Cara Penulisannya Ada 2 Singkat Dan Sebaliknya :
Cara Ke 1 ( Singkat ):
body{
background:url(URL GAMBAR)no-repeatbottom right #eee ;
}
Hasilnya Akan Menjadi Seperti Di Bawah Ini
Lihat Gambar Di Pojok Bawah Kanan.
Itu Hasilnya
Yg Diberi WarnaOrangeItu Untuk Membuat Gambar Menjadi Tunggal Atau Tanpa Mengulang
Silahkan Ganti Bottom Right Dengan Value Yg Saya Udah Jelasin Di Atas
JikaNo RepeatDi Ganti DenganRepeat-xMaka Hasilnya Akan Seperti Ini
Seperti Dibawah Hasilnya
Ohhh Iyah Jika Cara Penulisannya Tidak Singkat Begini
body{
background-image:url(URL GAMBAR)bottom right;
background-color:#eee;
background-repeat:repeat-x;
}
Background AttachmentBackground AttachmentUntuk Membuat Gambar Background Tetap
Bagaimana Cara Nya
body{
background-image: url(URL GAMBAR);
background-repeat: no-repeat;
background- attachment:fixed;
}
Ada 5 Value Background Attachment Yaitu :
NilaiDeskripsiscroll
Gulunganlatar belakangbersama denganelemen.Ini adalah defaultfixed
Latar belakangadalah tetapberkaitan denganviewportlocal
Gulunganlatar belakangbersama denganisielemen
initialSets this property to its default valueinherit
Mewarisiproperti ini darielemeninduknya