CSS Banyak Latar Belakang
Dalam bab ini Anda akan belajar bagaimana menambahkan beberapa gambar latar belakang ke satu elemen.
Anda juga akan belajar tentang properti berikut:
background-sizebackground-originbackground-clip
CSS Banyak Latar Belakang
CSS memungkinkan Anda untuk menambahkan beberapa gambar latar belakang untuk suatu elemen, melalui
background-imageproperti.
Gambar latar belakang yang berbeda dipisahkan dengan koma, dan gambar ditumpuk di atas satu sama lain, di mana gambar pertama paling dekat dengan pemirsa.
Contoh berikut memiliki dua gambar latar belakang, gambar pertama adalah bunga (sejajar dengan bawah dan kanan) dan gambar kedua adalah latar belakang kertas (sejajar dengan sudut kiri atas):
Contoh
#example1 {
background-image: url(img_flwr.gif), url(paper.gif);
background-position: right bottom, left top;
background-repeat: no-repeat, repeat;
}
Beberapa gambar latar belakang dapat ditentukan menggunakan properti latar belakang individu (seperti di atas) atau backgroundproperti singkatan.
Contoh berikut menggunakan backgroundproperti steno (hasil yang sama seperti contoh di atas):
Contoh
#example1 {
background: url(img_flwr.gif) right bottom
no-repeat, url(paper.gif) left top repeat;
}
Ukuran Latar Belakang CSS
Properti CSS background-sizememungkinkan Anda untuk menentukan ukuran gambar latar belakang.
Ukuran dapat ditentukan dalam panjang, persentase, atau dengan menggunakan salah satu dari dua kata kunci: isi atau sampul.
Contoh berikut mengubah ukuran gambar latar belakang menjadi jauh lebih kecil dari gambar asli (menggunakan piksel):
Terima Dia untuk Rasa Sakit
Rasa sakit itu sendiri adalah cinta
Itulah mengapa untuk hal sekecil apa pun yang akan datang, siapa yang ditanggung oleh latihan normal kita untuk mengambil keuntungan dari konsekuensinya
Berikut kodenya:
Contoh
#div1
{
background: url(img_flower.jpg);
background-size: 100px 80px;
background-repeat: no-repeat;
}
Dua nilai lain yang mungkin untuk background-sizeadalah contain
dan cover.
Kata containkunci menskalakan gambar latar menjadi sebesar mungkin (tetapi lebar dan tingginya harus pas di dalam area konten). Dengan demikian, tergantung pada proporsi gambar latar belakang dan area pemosisian latar belakang, mungkin ada beberapa area latar belakang yang tidak tercakup oleh gambar latar belakang.
Kata coverkunci menskalakan gambar latar belakang sehingga area konten sepenuhnya tertutup oleh gambar latar belakang (lebar dan tingginya sama dengan atau melebihi area konten). Dengan demikian, beberapa bagian dari gambar latar belakang mungkin tidak terlihat di area pemosisian latar belakang.
Contoh berikut mengilustrasikan penggunaan containdan cover:
Contoh
#div1
{
background: url(img_flower.jpg);
background-size: contain;
background-repeat: no-repeat;
}
#div2
{
background: url(img_flower.jpg);
background-size: cover;
background-repeat: no-repeat;
}
Tentukan Ukuran Beberapa Gambar Latar Belakang
Properti background-sizejuga menerima beberapa nilai untuk ukuran latar belakang (menggunakan daftar yang dipisahkan koma), saat bekerja dengan banyak latar belakang.
Contoh berikut memiliki tiga gambar latar belakang yang ditentukan, dengan nilai ukuran latar belakang yang berbeda untuk setiap gambar:
Contoh
#example1 {
background: url(img_tree.gif) left top
no-repeat, url(img_flwr.gif) right bottom no-repeat, url(paper.gif) left top
repeat;
background-size: 50px, 130px, auto;
}
Gambar Latar Belakang Ukuran Penuh
Sekarang kami ingin memiliki gambar latar belakang di situs web yang menutupi seluruh jendela browser setiap saat.
Persyaratannya adalah sebagai berikut:
- Isi seluruh halaman dengan gambar (tanpa spasi)
- Skala gambar sesuai kebutuhan
- Gambar tengah di halaman
- Jangan menyebabkan bilah gulir
Contoh berikut menunjukkan bagaimana melakukannya; Gunakan elemen <html> (elemen <html> selalu setidaknya setinggi jendela browser). Kemudian atur latar belakang tetap dan terpusat di atasnya. Kemudian sesuaikan ukurannya dengan properti background-size:
Contoh
html {
background: url(img_man.jpg) no-repeat
center fixed;
background-size: cover;
}
Gambar Pahlawan
Anda juga dapat menggunakan properti latar belakang yang berbeda pada <div> untuk membuat gambar pahlawan (gambar besar dengan teks), dan menempatkannya di tempat yang Anda inginkan.
Contoh
.hero-image {
background: url(img_man.jpg) no-repeat center;
background-size: cover;
height: 500px;
position:
relative;
}
Properti asal latar belakang CSS
Properti CSS background-originmenentukan di mana gambar latar belakang diposisikan.
Properti ini mengambil tiga nilai berbeda:
- border-box - gambar latar belakang dimulai dari sudut kiri atas perbatasan
- padding-box - (default) gambar latar belakang dimulai dari sudut kiri atas tepi padding
- kotak konten - gambar latar belakang dimulai dari sudut kiri atas konten
Contoh berikut mengilustrasikan background-originproperti:
Contoh
#example1
{
border: 10px solid black;
padding: 35px;
background: url(img_flwr.gif);
background-repeat: no-repeat;
background-origin: content-box;
}
Properti klip latar belakang CSS
Properti CSS background-clipmenentukan area lukisan latar belakang.
Properti ini mengambil tiga nilai berbeda:
- border-box - (default) latar belakang dicat ke tepi luar perbatasan
- padding-box - latar belakang dicat ke tepi luar padding
- kotak konten - latar belakang dicat di dalam kotak konten
Contoh berikut mengilustrasikan background-clipproperti:
Contoh
#example1
{
border: 10px dotted black;
padding: 35px;
background: yellow;
background-clip: content-box;
}
Properti Latar Belakang Lanjutan CSS
| Property | Description |
|---|---|
| background | A shorthand property for setting all the background properties in one declaration |
| background-clip | Specifies the painting area of the background |
| background-image | Specifies one or more background images for an element |
| background-origin | Specifies where the background image(s) is/are positioned |
| background-size | Specifies the size of the background image(s) |