Pada tutorial sebelumnya, kita sudah mempelajari Tutorial Belajar CSS Bagian 20 : Cara Mengatur Border Image di CSS. Selanjutnya, kita akan mempelajari cara mengatur multi background di CSS.
Properti CSS multi background digunakan untuk menambahkan satu atau lebih gambar sekaligus tanpa kode HTML, Kita dapat menambahkan gambar sesuai kebutuhan.
Contoh sintaks gambar multi background adalah sebagai berikut :
#multibackground { background-image: url(/css/images/logo.png), url(/css/images/border.png); background-position: left top, left top; background-repeat: no-repeat, repeat; padding: 75px; }Nilai yang paling umum digunakan untuk multi background adalah sebagai berikut :
No.Nilai & Deskripsi1backgroundDigunakan untuk mengatur semua properti gambar background dalam satu bagian2background-clip
Digunakan untuk mendeklarasikan area gambar background3background-image
Digunakan untuk menentukan gambar background4background-origin
Digunakan untuk menentukan posisi gambar background5background-size
Digunakan untuk menentukan ukuran gambar background
Untuk lebih jelasnya, Anda bisa melihat penggunaan multi background melalui contoh berikut ini :
<html> <head> <style> #multibackground { background-image: url(//mbahwp.com/wp-content/uploads/2017/07/Logo-Mbah-WP.png), url(//image.freepik.com/free-photo/abstract-techno-background_1048-8572.jpg); background-position: left top, left top; background-repeat: no-repeat, repeat; padding: 75px; } </style> </head> <body> <div id = "multibackground"> <h1>mbahwp.com </h1> <p> Mbah WP adalah website yang membahas berbagai materi seperti bisnis online ,server, web programing, blogging dan masalah terkait teknologi Anda bisa belajar apapun terkait teknologi lewat website ini. </p> </div> </body> </html>Browser akan menampilkan hasil sebagai berikut :
CodePen Embed FallbackCodePen Embed Fallback
Semoga tutorial ini membantu Anda untuk mempelajari cara mengatur multi background di CSS untuk mempercantik tampilan dokumen HTML.
Pada tutorial sebelumnya, kita sudah mempelajari Tutorial Belajar CSS Bagian 4 : Tabel Satuan Pengukuran di CSS. Pada tutorial kali ini, kita belajar cara menggunakan properti background di CSS.
Anda dapat mengatur properti background elemen berikut :
- Properti background-color digunakan untuk menyetel warna latar belakang sebuah elemen.
- Properti background-image digunakan untuk menyetel gambar latar belakang suatu elemen.
- Properti background-repeat digunakan untuk mengontrol pengulangan gambar di latar belakang.
- Properti background-position digunakan untuk mengontrol posisi gambar di latar belakang.
- Properti background-attachment digunakan untuk mengontrol pengguliran gambar di latar belakang.
- Properti background digunakan sebagai singkatan untuk menentukan sejumlah properti latar belakang lainnya.
Atur Background Color
Berikut adalah contoh yang menunjukkan bagaimana mengatur warna latar belakang untuk suatu elemen :
<html> <head> </head> <body> <p style = "background-color:yellow;"> Tulisan ini memiliki warna latar belakang kuning. </p> </body> </html>Browser akan menampilkan hasil sebagai berikut :
CodePen Embed FallbackCodePen Embed Fallback
Atur Background Image
Kita dapat mengatur gambar latar belakang dengan memanggil gambar yang disimpan lokal seperti yang ditunjukkan di bawah ini :
<html> <head> <style> body { background-image: url("//mbahwp.com/wp-content/uploads/2017/07/Logo-Mbah-WP.png"); background-color: #cccccc; } </style> </head> <body> <h1>Halo Dunia!</h1> </body> <html>Browser akan menampilkan hasil sebagai berikut :
CodePen Embed FallbackCodePen Embed Fallback
Mengulangi Background Image
Contoh berikut menunjukkan cara mengulang gambar latar belakang jika gambarnya kecil. Anda dapat menggunakan nilai ‘no-repeat’ untuk properti ‘background-repat’ jika Anda tidak ingin mengulang gambar, dalam hal ini gambar hanya akan ditampilkan sekali.
Secara default properti ‘background-repeat’ akan memiliki nilai ‘repeat’.
<html> <head> <style> body { background-image: url("//mbahwp.com/wp-content/uploads/2017/07/Logo-Mbah-WP.png"); background-repeat: repeat; } </style> </head> <body> <p>Mbah WP</p> </body> </html>Browser akan menampilkan hasil sebagai berikut :
CodePen Embed FallbackCodePen Embed Fallback
Contoh berikut yang menunjukkan bagaimana mengulang gambar latar belakang secara vertikal.
<html> <head> <style> body { background-image: url("//mbahwp.com/wp-content/uploads/2017/07/Logo-Mbah-WP.png"); background-repeat: repeat-y; } </style> </head> <body> <p>Mbah WP</p> </body> </html>Browser akan menampilkan hasil sebagai berikut :
CodePen Embed FallbackCodePen Embed Fallback
Contoh berikut menunjukkan cara mengulang gambar latar belakang secara horizontal.
<html> <head> <style> body { background-image: url("//mbahwp.com/wp-content/uploads/2017/07/Logo-Mbah-WP.png"); background-repeat: repeat-x; } </style> </head> <body> <p>Mbah WP</p> </body> </html>Browser akan menampilkan hasil sebagai berikut :
CodePen Embed FallbackCodePen Embed Fallback
Atur Posisi Background Image
Contoh berikut mendemonstrasikan cara mengatur posisi gambar latar belakang 100 piksel dari sisi kiri.
<html> <head> <style> body { background-image: url("//mbahwp.com/wp-content/uploads/2017/07/Logo-Mbah-WP.png"); background-position:100px; } </style> </head> <body> <p>Mbah WP</p> </body> </html>Browser akan menampilkan hasil sebagai berikut :
CodePen Embed FallbackCodePen Embed Fallback
Contoh berikut mendemonstrasikan cara mengatur posisi gambar latar belakang 100 piksel dari sisi kiri dan 200 piksel dari atas.
Browser akan menampilkan hasil sebagai berikut :
CodePen Embed FallbackCodePen Embed Fallback
Atur Background Attachment
Background attachment menentukan apakah gambar latar belakang tetap atau bergulir dengan sisa halaman.
Contoh berikut menunjukkan cara mengatur gambar latar belakang tetap.
<!DOCTYPE html> <html> <head> <style> body { background-image: url('//mbahwp.com/wp-content/uploads/2017/07/Logo-Mbah-WP.png'); background-repeat: no-repeat; background-attachment: fixed; } </style> </head> <body> <p> Gambar latar belakang tetap. Cobalah untuk menggulir halaman ke bawah.</p> <p> Gambar latar belakang tetap. Cobalah untuk menggulir halaman ke bawah.</p> <p> Gambar latar belakang tetap. Cobalah untuk menggulir halaman ke bawah.</p> <p> Gambar latar belakang tetap. Cobalah untuk menggulir halaman ke bawah.</p> <p> Gambar latar belakang tetap. Cobalah untuk menggulir halaman ke bawah.</p> <p> Gambar latar belakang tetap. Cobalah untuk menggulir halaman ke bawah.</p> <p> Gambar latar belakang tetap. Cobalah untuk menggulir halaman ke bawah.</p> <p> Gambar latar belakang tetap. Cobalah untuk menggulir halaman ke bawah.</p> <p> Gambar latar belakang tetap. Cobalah untuk menggulir halaman ke bawah.</p> </body> </html>Browser akan menampilkan hasil sebagai berikut :
CodePen Embed FallbackCodePen Embed Fallback
Contoh berikut menunjukkan cara mengatur gambar latar bergulir.
<!DOCTYPE html> <html> <head> <style> body { background-image: url('//mbahwp.com/wp-content/uploads/2017/07/Logo-Mbah-WP.png'); background-repeat: no-repeat; background-attachment:scroll; } </style> </head> <body> <p> Gambar latar belakang bergerak. Cobalah untuk menggulir halaman ke bawah.</p> <p> Gambar latar belakang bergerak. Cobalah untuk menggulir halaman ke bawah.</p> <p> Gambar latar belakang bergerak. Cobalah untuk menggulir halaman ke bawah.</p> <p> Gambar latar belakang bergerak. Cobalah untuk menggulir halaman ke bawah.</p> <p> Gambar latar belakang bergerak. Cobalah untuk menggulir halaman ke bawah.</p> <p> Gambar latar belakang bergerak. Cobalah untuk menggulir halaman ke bawah.</p> <p> Gambar latar belakang bergerak. Cobalah untuk menggulir halaman ke bawah.</p> <p> Gambar latar belakang bergerak. Cobalah untuk menggulir halaman ke bawah.</p> <p> Gambar latar belakang bergerak. Cobalah untuk menggulir halaman ke bawah.</p> </body> </html>Browser akan menampilkan hasil sebagai berikut :
CodePen Embed FallbackCodePen Embed Fallback
Shorthand Property
Anda dapat menggunakan properti background untuk mengatur semua properti background sekaligus. Sebagai contoh :
<p style = "background:url(//mbahwp.com/wp-content/uploads/2017/07/Logo-Mbah-WP.png) repeat fixed;"> Pharagraf ini bernilai fixed repeated background image. </p>Semoga tutorial ini membantu Anda mempelajari cara menggunakan properti background di CSS untuk mendesain dokumen HTML.