Macam-Macam Property Background Pada CSS
Kali ini saya akan membahas tentang bagaimana cara membuat beckground pada web maupun blog kalian. Sifat latar belakang CSS digunakan untuk memberikan effect latar belakang sebuah tampilan blog atau web. oke langsung kita mulai pembahasannya.
Macam-Macam Property Background Pada CSS |
Latar Belakang Properti CSS Meliputi:
Background-color
Background-image
Background-repeat
Background-attachment
Background-position
Oke Sekarang saya bahas satu persatu pengertian, fungsi dan contoh scriptnya, simak baik-baik ya...
1. Background-color
Properti ini memiliki fungsi yaitu memberika efect warna pada latar belakang web atau blog kalian. warna latar belakang halaman web atau blog dapat kalian liat pada script dibawah ini
Contoh :
body {
background-color: blue;
}
background-color: blue;
}
Selain dengan value nama warna, kalian juga dapat menentukan warna dengan 3 cara yaitu :
Menggunakan nama warna yang valid : "merah"
-Tidak semua nama warna dapat anda gunakan pada cara ini, sehingga kelemahan dari cara pertama ini adalah tidak semua warna dapat tercantum
Menggunakan nilai Hexadecimal : "FF0000"
-Jika anda menggunakan Hexadcimal anda dapat memilih warna sepuasnya, tapi ingat anda harus tau code hexadecimalnya, jika anda tidak mengetahui, anda bisa membuka photoshop kalian, dan cari tuh code warna hexadecimal
Menggunakan nilai RGB : "rgb (255,0,0)"
-Tidak semua orang menggunakan warna dengan code ini, sebab perlu angka-angka yang dimasukkan, tetapi cara ketiga ini bisa juga lebih mudah digunakan bila anda mencarinya di photohop (seperti cara yang kedua)
Contoh Pada Teks :
h1 {
background-color: green;
}
p {
background-color: blue;
}
Contoh Pada Kotak atau Tag DIV :
div {
background-color: purple;
}
2. Background-image
Properti ini menentukan latar belakang web atau blog dengan menggunakan gambar (Picture). Gambar latar belakang halaman web atau blog dapat kalian liat pada script dibawah ini :
Contoh :
body {
background-image : url('kertas.jpg');
}
Catatan :
- Ingat, untuk nilai ini ( url('kertas.jpg'); ) url jangan sampai ada space dengan tanda (, karena jika kalian beri space, maka gambar tidak akan muncul
- Gunakanlah latar belakang gambar yang tidak menggangu teks, atau merusak isi content, nantinya pengunjung ataupun pembaca sulit membaca maksut dari artikel tersebut
Jika gambar tersebut kalian buat Horizontal, berikut scriptnya :
body {
background-images: url('kertas.jpg');
background-repeat: repeat-x;
}
Background repeat yaitu properti yang digunakan untuk merubah posisi suatu gambar.
Contoh Gambar secara Horizontal:
Menggunakan nama warna yang valid : "merah"
-Tidak semua nama warna dapat anda gunakan pada cara ini, sehingga kelemahan dari cara pertama ini adalah tidak semua warna dapat tercantum
Menggunakan nilai Hexadecimal : "FF0000"
-Jika anda menggunakan Hexadcimal anda dapat memilih warna sepuasnya, tapi ingat anda harus tau code hexadecimalnya, jika anda tidak mengetahui, anda bisa membuka photoshop kalian, dan cari tuh code warna hexadecimal
Menggunakan nilai RGB : "rgb (255,0,0)"
-Tidak semua orang menggunakan warna dengan code ini, sebab perlu angka-angka yang dimasukkan, tetapi cara ketiga ini bisa juga lebih mudah digunakan bila anda mencarinya di photohop (seperti cara yang kedua)
Contoh Pada Teks :
h1 {
background-color: green;
}
p {
background-color: blue;
}
Contoh Pada Kotak atau Tag DIV :
div {
background-color: purple;
}
2. Background-image
Properti ini menentukan latar belakang web atau blog dengan menggunakan gambar (Picture). Gambar latar belakang halaman web atau blog dapat kalian liat pada script dibawah ini :
Contoh :
body {
background-image : url('kertas.jpg');
}
Catatan :
- Ingat, untuk nilai ini ( url('kertas.jpg'); ) url jangan sampai ada space dengan tanda (, karena jika kalian beri space, maka gambar tidak akan muncul
- Gunakanlah latar belakang gambar yang tidak menggangu teks, atau merusak isi content, nantinya pengunjung ataupun pembaca sulit membaca maksut dari artikel tersebut
Jika gambar tersebut kalian buat Horizontal, berikut scriptnya :
body {
background-images: url('kertas.jpg');
background-repeat: repeat-x;
}
3. Background-repeat
Background repeat yaitu properti yang digunakan untuk merubah posisi suatu gambar.
Contoh Gambar secara Horizontal:
body {
background-images: url('kertas.jpg');
background-repeat: repeat-x;
}
Contoh Gambar secara Vertikal:
body {
background-images: url('kertas.jpg');
background-repeat: repeat-y;
}
Properti yang diguanakn untuk mengatur gerak dari latar belakang gambar pada halaman sebuah web atau blog kalian, contoh latar belakang halaman web atau blog dapat kalian liat pada script dibawah ini :
Contoh :
body {
background-images: url('kertas.jpg');
background-atachment: fixed;
}
Posisi background akan diam ditempat, hanya bagian isi, header, dan footer yang bergerak ke atas.
Properti ini berfungsi untuk mengubah posisi suatu elemen.
Contoh :
body {
background-images: url('kertas.jpg');
background-atachment: fixed;
background-position: right top;
}
background-images: url('kertas.jpg');
background-repeat: repeat-x;
}
Contoh Gambar secara Vertikal:
body {
background-images: url('kertas.jpg');
background-repeat: repeat-y;
}
4. Background-attachment
Properti yang diguanakn untuk mengatur gerak dari latar belakang gambar pada halaman sebuah web atau blog kalian, contoh latar belakang halaman web atau blog dapat kalian liat pada script dibawah ini :
Contoh :
body {
background-images: url('kertas.jpg');
background-atachment: fixed;
}
Posisi background akan diam ditempat, hanya bagian isi, header, dan footer yang bergerak ke atas.
5. Background-position
Properti ini berfungsi untuk mengubah posisi suatu elemen.
Contoh :
body {
background-images: url('kertas.jpg');
background-atachment: fixed;
background-position: right top;
}
Tambahan :
Background - Shorthand Property
Untuk mempersingkat kode, juga memungkinkan untuk menentukan semua properti background dalam satu properti tunggal, ini disebut Shorthand Properti.
Contoh :
body {
background: #ffffff url('kertas.jpg') no-repeat right top;
}
Keterangan Properti CSS Background :
background Mengatur semua properti background dalam satu deklarasi
background-attachment Menentukan apakah gambar latar belakang tetap atau gulungan dengan sisa halaman
background-color Mengatur warna latar belakang dari elemen
background-image Mengatur gambar latar belakang untuk elemen
background-position Mengatur posisi awal dari gambar latar belakang
background-repeat Mengatur berapa gambar latar belakang akan diulang
Sekian tutorial dari saya, apabila kalian masih kebingungan dalam mencerna materi, silahkan bisa sambil dipraktekkan, dan bisa bertanya dikolom komentar dibawah artikel ini, Terimakasih.
Background - Shorthand Property
Untuk mempersingkat kode, juga memungkinkan untuk menentukan semua properti background dalam satu properti tunggal, ini disebut Shorthand Properti.
Contoh :
body {
background: #ffffff url('kertas.jpg') no-repeat right top;
}
Keterangan Properti CSS Background :
background Mengatur semua properti background dalam satu deklarasi
background-attachment Menentukan apakah gambar latar belakang tetap atau gulungan dengan sisa halaman
background-color Mengatur warna latar belakang dari elemen
background-image Mengatur gambar latar belakang untuk elemen
background-position Mengatur posisi awal dari gambar latar belakang
background-repeat Mengatur berapa gambar latar belakang akan diulang
Sekian tutorial dari saya, apabila kalian masih kebingungan dalam mencerna materi, silahkan bisa sambil dipraktekkan, dan bisa bertanya dikolom komentar dibawah artikel ini, Terimakasih.
Post a Comment for "Macam-Macam Property Background Pada CSS"
- Gunakan Kata-Kata Yang Sopan
- Dilarang Keras Menaruh Link Aktif Dibawah Postingan
- Dilarang Membuat SPAM
- Dilarang Saling Melecehkan Antar Sesama
- Dilarang Promosi Web/Blog/Obat-Obatan Atau Yang Lain