CSS - Multiple Backgrounds

Halo teman-teman desainer web yang sedang belajar! Hari ini, kita akan masuk ke dalam dunia yang menarik dari CSS multiple backgrounds. Sebagai guru komputer yang ramah di lingkungan sekitar Anda, saya di sini untuk mengarahkan Anda dalam perjalanan ini dengan banyak contoh dan penjelasan. Jadi, ambil minuman favorit Anda, dan mari kita mulai!

Sintaks

Sebelum kita melompat ke dalam lubuk dalam, mari kita mulai dari dasar. Sintaks untuk menggunakan multiple backgrounds di CSS adalah sangat sederhana:

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

Setiap background dipisahkan oleh koma, dan mereka diberlapis 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 piring akhirnya 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 sebuah elemen. top-image.png akan diletakkan di atas dan tidak akan berulang, sedangkan bottom-image.png akan berada di bawah dan akan berulang. Gambar atas akan dikelilingkan, dan gambar bawah akan dimulai dari sudut kiri atas.

CSS Multiple Backgrounds - Menggunakan Properti background-size

Sekarang, mari kita lihat bagaimana kita dapat mengendalikan 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 bagus untuk menggabungkan logo atau ikon kecil dengan pola background yang lebih besar.

CSS Multiple Backgrounds - Menggunakan Properti background

Properti background shorthand memungkinkan kita 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 dikelilingkan dan diukur menjadi 100px, sedangkan gradien menutupi seluruh elemen. Itu seperti menempatkan ceri di atas es krim berwarna!

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 menciptakan bagian hero yang dramatis atau background halaman penuh.

CSS Multiple Backgrounds - Hero Image

Bicara tentang bagian hero, ini cara Anda 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 beransur 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 posisi gambar background:

.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 dapat sangat berguna ketika Anda ingin mengendalikan tepat di mana background Anda dimulai dalam 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 memotong background ke bagian berbeda model kotak, menciptakan efek lapisan yang menarik.

CSS Multiple Backgrounds - Properti Terkait

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

Properti	Deskripsi
background-image	Mengatur satu atau lebih gambar background
background-position	Mengatur posisi awal setiap gambar background
background-size	Menentukan ukuran gambar background
background-repeat	Mengatur bagaimana gambar background diulang
background-origin	Menentukan area penempatan gambar background
background-clip	Menentukan seberapa jauh background harus diperpanjang dalam elemen
background-attachment	Mengatur apakah gambar background bergerak bersama 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 pun, teman-teman! Anda sekarang dilengkapi dengan pengetahuan untuk menciptakan background berlapis yang menakjubkan dalam CSS. Ingat, latihan membuat sempurna, jadi jangan khawatir untuk mencoba properti ini. Siapa tahu? Anda mungkin menciptakan tren besar berikutnya dalam desain web!

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

Credits: Image by storyset