Tutorial CSS 6 menjelaskan Cara mengatur Latar Belakang Web dengan CSS.
Tutorial CSS 6 menjelaskan Cara mengatur Latar Belakang Web dengan CSS. Bab ini mengajarkan Anda bagaimana untuk mengatur latar belakang dari berbagai elemen HTML. Anda dapat mengatur properti latar belakang berikut unsur :
- Properti background-color yang digunakan untuk mengatur warna latar belakang dari elemen.
- Properti background-image digunakan untuk mengatur gambar latar belakang dari 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 bergulir dari gambar di latar belakang.
- Properti background digunakan sebagai singkatan untuk menentukan sejumlah properti latar belakang lainnya.
Pengaturan Warna Latar Belakang
Berikut adalah contoh yang menunjukkan bagaimana untuk mengatur warna latar belakang untuk elemen.
<html><head><body><p style = "background-color:yellow;">This text has a yellow background color.</p></body></head><html>
Ini akan menghasilkan hasil sebagai berikut -
Pengaturan Latar Belakang Gambar
Kita dapat mengatur gambar latar belakang dengan memanggil gambar yang disimpan secara lokal seperti yang ditunjukkan di bawah ini
<html><head><style>body {background-image: url("/css/images/css.jpg");background-color: #cccccc;}</style><body><h1>Hello World!</h1></body></head><html>
Ini akan menghasilkan hasil sebagai berikut :
Mengulang Latar Belakang Gambar
Contoh berikut menunjukkan bagaimana untuk mengulang gambar latar belakang jika gambar kecil. Anda dapat menggunakan no-repeat nilai untuk properti background-repeat jika Anda tidak ingin mengulang gambar, dalam hal gambar ini akan menampilkan hanya sekali.
Secara default properti background-repeat akan memiliki nilai berulang.
<html><head><style>body {background-image: url("/css/images/css.jpg");background-repeat: repeat;}</style></head><body><p>Tutorials point</p></body></html>
Akan Menghasilkan seperti dibawah :
Contoh berikut yang menunjukkan bagaimana untuk mengulang gambar latar belakang vertikal.
<html><head><style>body {background-image: url("/css/images/css.jpg");background-repeat: repeat-y;}</style></head><body><p>Tutorials point</></body></html>
Akan Menghasilkan seperti dibawah :
Contoh berikut menunjukkan bagaimana untuk mengulang gambar latar belakang horizontal.
<html><head><style>body {background-image: url("/css/images/css.jpg");background-repeat: repeat-x;}</style></head><body><p>Tutorials point</></body></html>
Ini akan menghasilkan hasil sebagai berikut -
Pengaturan Posisi Latar Belakang Gambar
Contoh berikut menunjukkan bagaimana mengatur posisi gambar latar belakang 100 piksel jauh dari sisi kiri.
<html><head><style>body {background-image: url("/css/images/css.jpg");background-position:100px;}</style></head><body><p>Tutorials point</></body></html>
Akan menghasilkan berikut :
Contoh berikut menunjukkan bagaimana mengatur posisi gambar latar belakang 100 piksel dari sisi kiri dan 200 piksel turun dari atas.
<html><head><style>body {background-image: url("/css/images/css.jpg");background-position:100px 200px;}</style></head><body><p>Tutorials point</></body></html>
Akan menghasilkan sebagai berikut :
Pengaturan Attachment Latar Belakang
Latar Belakang attachment menentukan apakah gambar latar belakang tetap atau gulungan dengan sisa halaman.
Contoh berikut menunjukkan cara mengatur gambar latar belakang tetap.
<!DOCTYPE html><html><head><style>body {background-image: url('/css/images/css.jpg');background-repeat: no-repeat;background-attachment: fixed;}</style></head><body><p>The background-image is fixed. Try to scroll down the page.</p><p>The background-image is fixed. Try to scroll down the page.</p><p>The background-image is fixed. Try to scroll down the page.</p><p>The background-image is fixed. Try to scroll down the page.</p><p>The background-image is fixed. Try to scroll down the page.</p><p>The background-image is fixed. Try to scroll down the page.</p><p>The background-image is fixed. Try to scroll down the page.</p><p>The background-image is fixed. Try to scroll down the page.</p><p>The background-image is fixed. Try to scroll down the page.</p></body></html>
Akan Menghasilkan berikut ini :
ontoh berikut menunjukkan cara mengatur gambar latar belakang bergulir.
<!DOCTYPE html><html><head><style>body {background-image: url('/css/images/css.jpg');background-repeat: no-repeat;background-attachment: fixed;background-attachment:scroll;}.</style></head><body><p>The background-image is fixed. Try to scroll down the page.</p><p>The background-image is fixed. Try to scroll down the page.</p><p>The background-image is fixed. Try to scroll down the page.</p><p>The background-image is fixed. Try to scroll down the page.</p><p>The background-image is fixed. Try to scroll down the page.</p><p>The background-image is fixed. Try to scroll down the page.</p><p>The background-image is fixed. Try to scroll down the page.</p><p>The background-image is fixed. Try to scroll down the page.</p><p>The background-image is fixed. Try to scroll down the page.</p></body></html>
Akan Menghasilkan berikut ini :
Singkatan Properti
Anda dapat menggunakan properti background untuk mengatur semua properti background sekaligus. Misalnya -
<p style="background:url(/images/pattern1.gif) repeat fixed;">This parapgraph has fixed repeated background image.</p>
COMMENTS