Mengenal Background Dan Cara Penggunaannya - CSS

Oleh Unknown

Rabu, 27 Agustus 2014

Asssalamualaikum.wr.wbSaya Sekarang Ingin Berbagi Artikel Tentang Css, Kemarin Tentang Mengenal Border Dan Cara Penggunaanya Dan Kali Ini Tentang Background Pasti Sudah Tau Kan Apa Itu Background, Background Dalam B.Indonesia Latar Belakang.
Nah Dalam Css Background Atau Latar Belakang Ada Banyak Properti.
Yoo Kita Pelajari

Properi Background Di Dalam Css Ada 5 Yaitu :

background-color : Untuk Memberi Warna Background Pada Content Tersebut

background-image : Berfungsi Untuk Memberi Gambar Pada Background Content Tersebut

background-repeat : Untuk Memperbanyak Background Gambar Baik Vertikal Atau Pun Horizontal

background-size : Untuk Mengatur Ukuran Besar Kecil Atau Panjang Lebarnya Pada Background Image

background-position : Untuk Mengatur Posisi Background Image

background-attachment : Menentukan apakah gambar latar belakang tetap atau gulungan dengan sisa halaman

Background Color

Background Color .. Pasti Sudah Tau Kan Apa Itu Color. Color Yaitu Warna Sedangkan Background Latar Belakang Jika Digabung Warna Latar Belakang

Ada 2 Cara Penulisan Css Background-Color Ada Di Singkat Dan Sebaliknya

Cara Ke 1 ( Singkat ) :

body{
background:red ;
}

Cara Ke 2 ( Tidak Singkat ) :

body{
background-color:red ;
}

Yang Di Beri Tanda Warna Merah Ganti Dengan Warna Atau Kode Warna Yg Kalian Mau

Kode Warna Itu 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 Image

Pasti Sudah Tau Kan Background Image Itu 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 Di URL image, Misal :

background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjy1TPXHT9cH7ONWJ1BbyqWcMANw2Yz2w-NbXkTwKPY6VBAdHG8VNRqVx8iXSuKaSqcQMzV9_fyyC-ZvtXI5ImKZ3TlMNKmkqvI12Kvp7VH8lX3aSlWlVNvC5uqodpYb9yp7m_-GDk7gbXj/w140-h140-p/Background.png);

Ingat Yg Di Beri Warna Merah Jangan Di Hapus. Dan Harus Di Awali Dengan HTTP Atau HTTPS Atau WWW

Background Size

Background Size Itu Berfungsi Untuk Mengecilkan Atau Membesarkan Background Image.

Cara Penulisannya Ada 1 Tidak Singkat :

body{
background-size:350px 250px ;
}

Yang Di Beri Warna Merah Itu Untuk Mengatur Width Atau Panjangnya Background Image Tersebut
Yang Di Beri Warna Hijau Itu Untuk Mengatur Tinggi Pada Background Image Tersebut

Jika Ingin Full Atau Pas Dalam Mengatur Background Image Begini :

body{
background-size:100% 100%;
}

Background Repeat

Background Repeat Yaitu 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 Bagian Background Position

Background Position

Background 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-repeat bottom right #eee ;
}

Hasilnya Akan Menjadi Seperti Di Bawah Ini

Lihat Gambar Di Pojok Bawah Kanan.

Itu Hasilnya

Yg Diberi Warna Orange Itu Untuk Membuat Gambar Menjadi Tunggal Atau Tanpa Mengulang

Silahkan Ganti Bottom Right Dengan Value Yg Saya Udah Jelasin Di Atas

Jika No Repeat Di Ganti Dengan Repeat-x Maka 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 Attachment

Background Attachment Untuk 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 :

Nilai	Deskripsi
scroll	Gulungan latar belakang bersama dengan elemen. Ini adalah default
fixed	Latar belakang adalah tetap berkaitan dengan viewport
local	Gulungan latar belakang bersama dengan isi elemen
initial	Sets this property to its default value
inherit	Mewarisi properti ini dari elemen induknya

Cape Juga Nih Nulis Jika Kurang Mengerti Mohon Maaf Dan Silahkan Bertanya Di Komentar,
Sekian Semoga Bermanfaat
Wasssalamualaikum.wr.wb

Tag : Belajar Css

10 Detik