Background
Background CSS
Pada CSS Anda bisa memberikan style untuk background atau latar belakang, kebanyakan orang menggunakan properti background
untuk mengatur warna latar belakang atau memberikan gambar latar belakang. CSS menyediakan beberapa properti untuk styling latar belakang seperti: background-color
, background-image
, background-repeat
, background-attachment
dan background-position
.
Background-color
Dengan properti background-color
Anda bisa menggunakannya untuk memberikan warna latar belakang pada elemen HTML.
Nilai color CSS yang paling sering gunakan:
- nilai HEX – seperti #ff0000
- nilai RGB – seperti rgb (255,0,0)
- nama color – seperti blue
h1 {
background-color: green;
}
p {
background-color: orange;
}
Background-image
Dengan properti background-image
Anda bisa menggunakannya untuk menambahkan gambar latar belakang pada elemen HTML. Secara default background image akan mengulang gambarnya baik secara horizontal atau pun vertikal sehingga mencakup seluruh elemen.
body {
background-image: url(“https://tools.hendky.com/wp-content/uploads/2019/10/kucing-tidur.jpg”);
}
Masukan url gambar dengan benar. Jika tidak, gambar akan gagal dimuat atau tidak menampilkan apa-apa. Saat menggunakan gambar latar belakang, gunakan gambar yang tidak mengganggu teks atau elemen yang ada didalamnya.
Background-repeat
Dengan properti background-repeat
Anda bisa menggunakannya untuk mengatur pengulangan gambar. Pada background repeat sendiri biasanya para programmer mengatur pengulangannya secara horizontal, vertikal atau tidak sama sekali. Berikut listnya beserta contoh didalamnya:
- background-repeat: repeat-x
- background-repeat: repeat-y
- background-repeat: no-repeat
Contoh: background-repeat: repeat-x
yang berguna untuk mengontrol pengulangan secara horizontal.
body {
background-image: url(“https://tools.hendky.com/wp-content/uploads/2019/10/kucing-tidur.jpg”);
background-repeat: repeat-x;
}
Contoh: background-repeat: repeat-y
yang berguna untuk mengontrol pengulangan secara vertikal.
body {
background-image: url(“https://tools.hendky.com/wp-content/uploads/2019/10/kucing-tidur.jpg”);
background-repeat: repeat-y;
}
Contoh: background-repeat: no-repeat
yang berguna supaya tidak ada pengulangan gambar atau menampilkan gambar tunggal.
body {
background-image: url(“https://tools.hendky.com/wp-content/uploads/2019/10/kucing-tidur.jpg”);
background-repeat: no-repeat;
}
Background-position
Dengan properti background-position
Anda bisa menggunakannya untuk mengatur posisi gambar. Anda bisa mengatur background position dengan memasukan nilai posisi seperti dibawah ini:
top, right, bottom, left dan center (atas, kanan, bawah, kiri dan tengah)
atau
Anda juga bisa memasukan dengan patokan px ( pixel ) atau % ( persen ).
Silakan Anda masukan nilai dengan dua parameter. Pada contoh dibawah ini saya memasukan nilai: right top.
body {
background-image: url(“https://tools.hendky.com/wp-content/uploads/2019/10/kucing-tidur.jpg”);
background-repeat: no-repeat;
background-position: right top;
}
Background-attachment
Dengan properti background-attachment
Anda bisa menggunakannya untuk mengatur apakah gambar bisa digulir atau posisi fixed ( tidak bisa digulir ).
Anda bisa mengatur background attachment dengan dua cara:
- background-attachment: fixed
- background-attachment: scroll
Contoh: background-attachment: fixed
yang berguna supaya gambar tidak bisa digulir atau posisi tetap.
body {
background-image: url(“https://tools.hendky.com/wp-content/uploads/2019/10/kucing-tidur.jpg”);
background-repeat: no-repeat;
background-position: right top;
background-attachment: fixed;
}
Informasi: agar bisa melihat perbedaan antar background-attachment: fixed dan background-attachment: scroll, silakan Anda gulir atau scroll mousenya dari contoh keduanya. Supaya bisa melihat perbedaanya.
Contoh: background-attachment: scroll
yang berguna supaya gambar bisa digulir atau discroll ( ini defaultnya ).
body {
background-image: url(“https://tools.hendky.com/wp-content/uploads/2019/10/kucing-tidur.jpg”);
background-repeat: no-repeat;
background-position: right top;
background-attachment: scrol;
}
Informasi: agar bisa melihat perbedaan antar background-attachment: fixed dan background-attachment: scroll, silakan Anda gulir atau scroll mousenya dari contoh keduanya. Supaya bisa melihat perbedaanya.
Background shorthand
Dengan background shorthand Anda bisa mempersingkat sebuah kode. Shorthand sendiri yang berarti “steno” atau menulis cepat. Dengan cara ini dimungkinkan juga untuk menentukan semua properti background dalam satu properti tunggal.
Untuk menggunakan background shorthand Anda cukup menggunakan properti background
. Dengan begitu Anda tidak lagi menulis kode yang panjang seperti contoh diatas.
body {
background: #ffffff url(“https://tools.hendky.com/wp-content/uploads/2019/10/kucing-tidur.jpg”) no-repeat right top;
}
Saat menggunakan properti steno urutan nilai properti adalah:
background-color
background-image
background-repeat
background-attachment
background-position
Tidak masalah jika salah satu nilai properti hilang, asalkan yang lain ada dalam urutan ini.
Daftar properti background
Properti | Kegunaanya |
---|---|
background | Mengatur semua properti latar belakang dalam satu deklarasi |
background-color | Mengatur warna latar belakang |
background-image | Mengatur gambar latar belakang |
background-repeat | Mengatur pengulangan gambar latar belakang |
background-position | Mengatur posisi gambar latar belakang |
background-attachment | Mengatur apakah gambar latar belakang fixed atau scroll |