Pengulangan Gambar Latar Belakang CSS
Pengulangan latar belakang CSS
Secara default, background-imageproperti mengulang gambar baik secara horizontal maupun vertikal.
Beberapa gambar harus diulang hanya secara horizontal atau vertikal, atau mereka akan terlihat aneh, seperti ini:
Contoh
body
{
background-image: url("gradient_bg.png");
}
Jika gambar di atas diulang hanya secara horizontal ( background-repeat: repeat-x;), latar belakang akan terlihat lebih baik:
Contoh
body
{
background-image: url("gradient_bg.png");
background-repeat: repeat-x;
}
Tip: Untuk mengulang gambar secara vertikal, aturbackground-repeat: repeat-y;
Pengulangan latar belakang CSS: tanpa pengulangan
Menampilkan gambar latar belakang hanya sekali juga ditentukan oleh background-repeatproperti:
Contoh
Tampilkan gambar latar belakang hanya sekali:
body
{
background-image: url("img_tree.png");
background-repeat: no-repeat;
}
Pada contoh di atas, gambar latar ditempatkan di tempat yang sama dengan teks. Kami ingin mengubah posisi gambar, sehingga tidak terlalu mengganggu teks.
Posisi latar belakang CSS
Properti background-positionini digunakan untuk menentukan posisi gambar latar belakang.
Contoh
Posisikan gambar latar belakang di pojok kanan atas:
body
{
background-image: url("img_tree.png");
background-repeat: no-repeat;
background-position: right top;
}