CSS - Multiple Backgrounds

Hai pengguna web yang bersemangat! Hari ini, kita akan melihat dunia yang menarik CSS multiple backgrounds. Seperti guru komputer di lingkungan yang ramah, saya di sini untuk membimbing anda dalam perjalanan ini dengan banyak contoh dan penjelasan. Jadi, ambil minuman kesukaan anda, dan mari kita mulai!

Sintaks

Sebelum kita melompat ke dalam, mari kita mulai dengan dasar. Sintaks untuk menggunakan multiple backgrounds dalam CSS adalah cukup sederhana:

selector {
background: background1, background2, ..., backgroundN;
}

Setiap background dipisahkan oleh koma, dan mereka diatur dari pertama ke terakhir. Background pertama yang anda daftar akan berada di atas, dan yang terakhir akan berada di bawah. Itu seperti menumpuk pancake - yang pertama Anda letakkan di piringan akan berada di atas!

CSS Multiple Backgrounds - Menggunakan properti background-image

Mari kita mulai dengan contoh sederhana menggunakan properti background-image:

.multi-bg {
background-image:
url('top-image.png'),
url('bottom-image.png');
background-repeat: no-repeat, repeat;
background-position: center center, top left;
}

Dalam contoh ini, kita menerapkan dua gambar background ke elemen. top-image.png akan diletakkan di atas dan tidak akan berulang, sedangkan bottom-image.png akan berada di bawahnya dan akan berulang. Gambar atas akan diletakkan di tengah, dan gambar bawah akan dimulai dari sudut kiri atas.

CSS Multiple Backgrounds - Menggunakan Properti background-size

Sekarang, mari kita lihat bagaimana kita dapat mengatur ukuran gambar background kita:

.sized-bg {
background-image:
url('small-icon.png'),
url('large-pattern.png');
background-size: 50px 50px, cover;
background-repeat: no-repeat, repeat;
background-position: top right, center;
}

Di sini, kita mengatur ukuran small-icon.png menjadi 50x50 piksel, sedangkan large-pattern.png akan menutupi seluruh elemen. Ini sangat baik untuk menggabungkan logo atau ikon kecil dengan pola background yang besar.

CSS Multiple Backgrounds - Menggunakan Properti background

Properti background shorthand memungkinkan kita untuk mengatur semua properti background sekaligus:

.shorthand-bg {
background:
url('top-layer.png') no-repeat center / 100px,
linear-gradient(to bottom, #f00, #00f) no-repeat center / cover;
}

Contoh ini menggabungkan gambar dengan background gradien. Gambar diletakkan di tengah dan diukur menjadi 100px, sedangkan gradien menutupi seluruh elemen. Itu seperti menaruh ceri di atas es krim berwarna-warni!

CSS Multiple Backgrounds - Gambar Full Size

kadang-kadang, Anda ingin sebuah gambar menutupi seluruh background:

.full-size-bg {
background:
linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5)),
url('landscape.jpg') no-repeat center center / cover;
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
color: white;
font-size: 2em;
}

Ini menciptakan gambar background full size dengan overlay semi-transparan. Itu sempurna untuk membuat bagian hero yang dramatis atau background halaman penuh.

CSS Multiple Backgrounds - Hero Image

Bicarakan tentang bagian hero, mari kita lihat bagaimana membuatnya:

.hero-bg {
background:
linear-gradient(to right, rgba(0,0,0,0.7), rgba(0,0,0,0.1)),
url('hero-image.jpg') no-repeat center center / cover;
height: 80vh;
display: flex;
flex-direction: column;
justify-content: center;
padding: 0 20px;
color: white;
}

Ini menciptakan bagian hero dengan gambar background dan overlay gradien yang mengabur dari kiri ke kanan. Itu seperti menyiapkan panggung untuk pembukaan besar website anda!

CSS Multiple Backgrounds - Menggunakan Properti background-origin

Properti background-origin menentukan di mana gambar background diletakkan:

.origin-bg {
background-image: url('pattern.png');
background-origin: content-box, padding-box, border-box;
background-repeat: no-repeat;
border: 10px dashed black;
padding: 20px;
}

Properti ini sangat berguna ketika Anda ingin mengontrol tepat di mana background Anda dimulai dalam hubungan dengan model kotak elemen.

CSS Multiple Backgrounds - Menggunakan Properti background-clip

Properti background-clip menentukan seberapa jauh background harus diperpanjang:

.clip-bg {
background-image:
url('top-image.png'),
url('bottom-image.png');
background-clip: content-box, padding-box;
border: 10px solid rgba(0,0,0,0.5);
padding: 20px;
}

Ini memungkinkan Anda untuk memotong background ke bagian berbeda model kotak, menciptakan efek layering yang menarik.

CSS Multiple Backgrounds - Properti Terkait

Berikut adalah tabel properti terkait yang Anda dapat gunakan dengan multiple backgrounds:

Properti	Deskripsi
background-image	Menetapkan satu atau lebih gambar background
background-position	Menetapkan posisi awal setiap gambar background
background-size	Menentukan ukuran gambar background
background-repeat	Menetapkan bagaimana gambar background diulang
background-origin	Menentukan area penempatan gambar background
background-clip	Menentukan seberapa jauh background harus diperpanjang dalam elemen
background-attachment	Menetapkan apakah gambar background bergulir dengan sisanya halaman atau tetap

Ingat, Anda dapat menggunakan properti ini secara individual atau menggabungkannya dalam properti background shorthand untuk kode yang lebih ringkas.

Dan begitu juga, teman-teman! Anda sekarang dilengkapi pengetahuan untuk menciptakan background multi-lapisan yang menakjubkan dalam CSS. Ingat, latihan membuat sempurna, jadi jangan takut untuk mencoba properti ini. Siapa tahu? Anda mungkin menciptakan tren besar berikutnya dalam desain web!

Selamat coding, dan semoga background Anda selalu terlayer dengan sempurna!

Credits: Image by storyset