Cara membuat multi background pada CSS, umumnya hanya digunakan satu dan tak memerlukan lebih. Namun, terkadang multi background ini dibutuhkan agar mengurangi beban muatan gambar pada website yang terlalu besar.
Multi background yang dimaksud, bertujuan untuk menumpuk background dengan pola lalu ditambah gambar agar website lebih menarik dan spesifik, lalu apa saja cara membuat multi background pada CSS?
Multi Background CSS
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<#style>
#multibackground {
background-image: url(https://www.kursuswebsite.org/wp-content/uploads/2019/07/Logo-DUMET-School-Versi-Biru.png),
url(http://cdn.backgroundhost.com/backgrounds/subtlepatterns/blu_stripes.png);
background-position: left top, left top;
background-repeat: no-repeat, repeat;
padding: 75px;
}
<#/style>
</head>
<body>
<div id = "multibackground">
<h1>Kursus Webstite</h1>
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
</p>
</div>
</body>
</html>
Kode diatas, hanya dikhususkan untuk multi background dan tak memiliki style. Berikut kode CSS selanjutnya :
#multibackground {
background-image: url(https://www.iniwebsite.org/wp-content/uploads/2019/07/Logo-DUMET-School-Versi-Biru.png),
url(http://cdn.backgroundhost.com/backgrounds/subtlepatterns/blu_stripes.png);
background-position: left top, left top;
background-repeat: no-repeat, repeat;
padding: 75px;
}
Jika kode diatas tak berfungsi, anda bisa menggunakan kode selanjutnya :
Kode HTML
<div id="wrap"></div>
Kode CSS
body {
background: url(http://intikali.org/images/bintang.png) no-repeat top left, url(http://intikali.org/images/bintang.png) no-repeat fixed right 100px, url(http://intikali.org/images/bg.png) repeat center center;
}
#wrap {
width: 50%;
height: 1500px;
}
}
Kode diatas, merupakan background untuk demo dengan warna polkadot dan bintang pada sebelah kanannya. Ternyata, multi background terbagi menjadi dua jenis yaitu gradient dan regular. Penggunaan ini, memudahkan anda dalam menyediakan image melalui URL dan gambar akan muncul sebagai background dari elemen CSS.
Teknik tersebut, berguna untuk permintaan HTTP yang menjadi teknik terbaik. Sebelum mengganti semua background gambar ada baiknya anda mempertimbangkan pro kontra antara URL data. Disisi lain, anda juga dapat menggunakan latar gambar untuk multiple background serta membuat gambar sendiri dan berguna dalam mengurangi permintaan HTTP.
Background CSS Menggunakan Gradient
Terdapat opsi lain dalam penggunaan background pada CSS, yaitu menggunakan browser untuk memerintah dalam membuat background. Ini caranya :
body {
background: linear-gradient(gray, blue);
}
Gaya lainnya, bisa anda coba dengan radial gradient :
body {
background: radial-gradient(circle, gray, blue);
}
Gradient sendiri, merupakan bentuk dari background image maupun gambar latar belakang pada website. Bedanya, hanya pada browser yang digunakan untuk membuat gambar tersebut. Namun, terdapat pola menarik yang bisa anda kembangkan jika menggunakan gradient ini.
Background image yang tak dapat dimuat, maupun browser anda tidak mendukung. Anda bisa gunakan warna fallback seperti kode berikut :
body {
background: url("desert.jpg") green;
}
Multiple Background CSS Image
Pada multiple background, cara membuat multi background pada CSS ini bisa anda campurkan dengan gradient agar terlihat menarik. Gambar latar belakang dengan dukungan browser modern dan IE9 ditambah gambar grafik membuat background anda terkesan unik.
Jika menggunakan latar belakang ganda ini, anda perlu mengetahui bahwa terdapat urutan gambar yang menumpuk dan memiliki kontra. Pertama-tama anda perlu membuat daftar gambar seperti ini:
body {
background: url("desert.jpg"), url("cat.png");
}
Menggunakan background image, membuat anda seringkali menetapkan nilai agar background mendapatkan tempat yang sesuai. Jika ingin menggunakan steno pada latar belakang, anda bisa mengatur setiap nilai gambar satu per satu.
Ini kode singkat dalam menggunakan multiple background image:
body {
background:
url("desert.jpg") bottom center no-repeat,
url("cat.png") repeat;
}
Multiple background image pada CSS, tak menerapkan batasan dan anda bisa mengaturnya sesuka hati.
Mengatur Background Image CSS
Pengaturan background image pada CSS, perlu diatur posisinya agar terlihat pas dan cocok dengan multi background yang anda buat. Seperti bentuk vertikal dan horizontal gambar, sangat penting untuk anda ketahui. Berikut cara atur posisi background image di CSS:
<style type="text/css">
body {
background-image: url('image/bg.jpg');
background-repeat: no-repeat;
background-position: right top;
color: white;
}
</style>
Posisi background yang bertanda merah, bisa anda isi dengan nilai pada pixel menggunakan ukuran satuan. Nilai pertama tersebut berguna untuk posisi vertikal dan nilai kedua ini berbentuk horizontal:
<style type="text/css">
body {
background-image: url('image/bg.jpg');
background-repeat: no-repeat;
background-position: 100px 100px;
color: white;
}
</style>
Jika anda menggunakan bottom, left dan posisi top dalam pemberian posisi background tersebut, hal itu juga bergantung pada keyword yang tertulis.
Memposisikan Attachment Background Image di CSS
Mengatur attachment dalam CSS, memerlukan properti background dimana difungsikan untuk menciptakan background image diam saat di scroll. Berikut kodenya :
<style type="text/css">
body {
background-image: url('image/bg.jpg');
background-attachment: fixed;
color: white;
}
</style>
Dilihat secara nilai, bawaan background attachment secara default memiliki nilai scroll dimana background tersebut masih mengikuti objek konten dalam browser.
Menerapkan Ukuran Background Image di CSS
Image CSS, perlu diatur dengan posisi yang stabil agar background tersebut dapat seimbang saat website dijalankan. Dengan background size, ukuran background image menggunakan background size membuat background diatur agar sesuai presisi maupun fullscreen pada layar.
background-size: width height;
Kode tersebut, berguna dalam menentukan tinggi dan lebar background image dimana nilai pertama berguna dalam mengatur nilai dan lebar serta nilai kedua berguna dalam mengatur tinggi background yang anda butuhkan.
<style type="text/css">
body {
background-image: url('image/bg.jpg');
background-repeat: no-repeat;
background-size: 500px 400px;
color: white;
}
</style>
Jika anda ingin membuat background image full screen pada monitor, maka gunakan nilai cover untuk tampilan penuh.
<style type="text/css">
body {
background-image: url('image/bg.jpg');
background-repeat: no-repeat;
background-size: cover;
color: white;
}
</style>
Kode diatas, merupakan nilai cover dimana background image tak diulang dengan nilai cover dan menghasilkan fullscreen image.
Properti Pada Background CSS
Properti singkat pada CSS, berguna untuk menjadikan satu properti dengan menggunakan background.
background: color image repeat position;
Berikut contoh lainnya dalam property singkat pada CSS:
<style type="text/css">
body {
background: yellow url('image/bg.jpg') no-repeat center center;
color: white;
}
</style>
Mudah kan, cara membuat multi background pada CSS. Dengan sintaks diatas, anda bisa langsung copy paste kode tersebut dan memudahkan anda dalam membuat background website. Adanya CSS, anda bisa mengatur layout tampilan pada website agar website terlihat menarik serta mengatur elemen website agar optimal.
Memudahkan programmer untuk mengatur tampilan website, CSS dapat membantu mengatur background, font bahkan style website agar terlihat rapi. Kaitan yang erat dengan HTML, CSS merupakan bahasa markup yang tak dapat dipisahkan. Pasalnya, CSS sendiri adalah bahasa pemrograman yang berjalan beriringan agar website bisa berjalan dengan baik.
Kelebihan CSS dalam membuat multi background, ialah dapat mengatur semua aspek website sehingga tampilan yang tertampil pada monitor terlihat fresh dan tidak monoton. Kombinasi yang dilakukan CSS, sebenarnya dirancang untuk memodifikasi konten maupun website agar website tersebut terlihat simpel dan rapi.
Setelah mempelajari cara membuat multi background pada CSS, sekarang anda mengetahui kelebihan serta fungsi CSS itu sendiri. Selain memudahkan website agar terlihat sempurna, CSS juga berguna agar konten website anda terbantu dalam berperan memberi informasi di pencarian Google.