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 :
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("https://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 :
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("https://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 :
Contoh berikut yang menunjukkan bagaimana mengulang gambar latar belakang secara vertikal.
<html> <head> <style> body { background-image: url("https://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 :
Contoh berikut menunjukkan cara mengulang gambar latar belakang secara horizontal.
<html> <head> <style> body { background-image: url("https://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 :
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("https://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 :
Contoh berikut mendemonstrasikan cara mengatur posisi gambar latar belakang 100 piksel dari sisi kiri dan 200 piksel dari atas.
<html> <head> <style> body { background-image: url("https://mbahwp.com/wp-content/uploads/2017/07/Logo-Mbah-WP.png"); background-position:100px 200px; } </style> </head> <body> <p>Mbah WP</p> </body> </html>
Browser akan menampilkan hasil sebagai berikut :
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('https://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 :
Contoh berikut menunjukkan cara mengatur gambar latar bergulir.
<!DOCTYPE html> <html> <head> <style> body { background-image: url('https://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 :
Shorthand Property
Anda dapat menggunakan properti background untuk mengatur semua properti background sekaligus. Sebagai contoh :
<p style = "background:url(https://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.
0 Komentar