Latar belakang CSS vs warna latar belakang

lalu menambahkan heading dan paragraf.

HTML

< div >

< h1 > LinuxPetunjuk < / h1 >

< p > Selamat datang di website kami < / p >

< / div >

Di CSS, kita akan menyesuaikan ketinggian div sebagai “ 100% ” untuk membuatnya muncul di seluruh halaman dan ukuran font teks sebagai “ xx-besar ”. Setelah itu, atur warna latar belakang sebagai “ air ”.

CSS

div {

tinggi : 100% ;

ukuran huruf : xx-besar ;

warna latar belakang : air ;

}

Pada gambar yang disediakan di bawah ini, Anda dapat melihat bahwa warna latar belakang diterapkan:

Properti gambar latar belakang CSS

' gambar latar belakang Properti ” digunakan untuk mengatur satu atau lebih gambar sebagai latar belakang elemen HTML. Anda dapat menggunakan properti ini untuk menambahkan gambar latar belakang yang berbeda untuk elemen yang berbeda.

Sintaksis

Sintaks dari properti background-image adalah:

gambar latar belakang: url()

Di sini, berikan jalur gambar yang ingin Anda atur sebagai latar belakang sebagai argumen ke ' url() ”.

Contoh

Sebagai kelanjutan dari contoh sebelumnya, tambahkan gambar latar belakang di ' div ' kelas. Kami akan menambahkan url gambar sebagai “ url (img.jpg) ”:

div {

...

gambar latar belakang : url ( img.jpg ) ;

}

Output yang disediakan di bawah ini menunjukkan bahwa gambar latar belakang telah berhasil ditambahkan:

Perhatikan bahwa gambar diulang. Untuk mengatasi masalah ini, periksa properti berikutnya.

Properti pengulangan latar belakang CSS

Saat Anda menambahkan gambar sebagai latar belakang pada halaman web, itu akan diulang secara default. Untuk menghindari pengulangan ini dan mengatur pola sesuai pilihan Anda, tombol “ latar belakang-ulangi ” properti digunakan.

Sintaksis

Sintaks dari properti background-repeat adalah:

latar belakang-ulangi : ulang | ulangi-x | ulangi-y | jangan ulangi

Deskripsi nilai yang dinyatakan dari properti background-repeat diberikan di bawah ini:

• ulang: Ini digunakan untuk mengulang gambar di kedua arah, vertikal dan horizontal.
• ulangi-x: Ini digunakan untuk mengatur pengulangan gambar hanya secara horizontal.
• ulangi-y: Ini menentukan pengulangan vertikal gambar.
• tidak berulang: Digunakan untuk menghindari pengulangan gambar.

Contoh

Di sini, kita akan menetapkan nilai properti background-repeat sebagai “ jangan ulangi ”:

div {

...

latar belakang-ulangi : jangan ulangi ;

}

Hasil dari kode yang diberikan di atas diberikan di bawah ini. Anda dapat melihat bahwa gambar tidak diulang lagi:

Properti posisi latar belakang CSS

Untuk mengatur posisi gambar latar belakang, tombol “ latar belakang-posisi ” properti digunakan. Hal ini memungkinkan Anda untuk menyesuaikan gambar dalam posisi yang berbeda seperti kiri atas, kiri tengah, kiri bawah, kanan atas, tengah kanan, dan banyak lagi.

Sintaksis

Sintaks dari properti background-position adalah:

latar belakang-posisi : nilai

Di tempat “ nilai ”, Anda dapat menentukan posisi gambar.

Contoh

Di sini, kita akan mengatur posisi latar belakang sebagai “ tengah ”:

div {

...

latar belakang-posisi : tengah ;

}

Pada output di bawah ini, gambar muncul di tengah halaman:

Properti ukuran latar belakang CSS

Untuk mengatur ukuran gambar latar belakang, tombol “ ukuran latar belakang ” properti digunakan.

Sintaksis

Ukuran latar belakang memiliki sintaks berikut:

ukuran latar belakang : panjang|penutup

Berikut ini adalah deskripsi nilai dari properti background-size:

• panjangnya: Ini digunakan untuk memperbaiki lebar dan tinggi gambar latar belakang.
• menutupi: Ini digunakan untuk menyesuaikan gambar latar belakang di seluruh latar belakang.

Contoh

Kami akan mengatur ukuran latar belakang sebagai “ 100% ” tinggi dan ” 80% ' lebar:

div {

...

ukuran latar belakang : 100% 80% ;

}

Anda dapat melihat bahwa gambar telah diubah ukurannya berdasarkan dimensi yang ditentukan:

Properti asal latar belakang CSS

' latar belakang-asal Properti ” digunakan untuk mengatur area pemosisian gambar latar belakang. Gambar disesuaikan di sudut kiri atas sebagai default.

Sintaksis

Sintaks dari properti background-origin adalah:

latar belakang-asal : padding-kotak| perbatasan-kotak | kotak-konten

Nilai dari properti background-origin dijelaskan di bawah ini:

• padding-kotak: Ini adalah nilai default dari properti background-origin yang digunakan untuk menyesuaikan posisi gambar latar belakang menurut tepi padding.
• perbatasan-kotak: Ini digunakan untuk mengatur gambar sesuai dengan kotak batas gambar.
• kotak-konten: Ini digunakan untuk mengatur gambar latar belakang sesuai dengan isi gambar.

Catatan: Properti background-origin tidak berfungsi jika nilai properti background-attachment disetel sebagai “ tetap ”.

Contoh

Pertama, buat batas di sekitar wadah. Di sini, kita akan melanjutkan contoh sebelumnya dan menetapkan nilai padding sebagai “ 10px ”. Setelah itu, sesuaikan lebar perbatasan sebagai “ 15px ”, gaya sebagai “ punggung bukit ”, dan warnai sebagai “ rgb(1, 68, 68) ”. Pada akhirnya, kami akan menetapkan nilai properti background-origin sebagai “ kotak-konten ”:

div {

...

lapisan : 10px ;

berbatasan : 15px punggung bukit rgb ( 1 , 68 , 68 ) ;

latar belakang-asal : kotak-konten ;

}

Hasil dari kode yang diberikan di atas diberikan di bawah ini. Anda dapat melihat bahwa posisi gambar diatur sesuai dengan konten div:

Properti klip latar belakang CSS

' klip latar belakang ” properti bekerja pada warna latar belakang elemen. Ini memungkinkan Anda mengontrol seberapa jauh warna latar belakang melampaui elemen, seperti padding elemen, batasnya, dan kontennya.

Sintaksis

Sintaks dari properti background-clip adalah:

latar belakang-asal : perbatasan-kotak | padding-kotak | kotak-konten

Nilai dari properti background-origin dijelaskan di bawah ini:

• perbatasan-kotak: Ini adalah nilai default dari properti background-origin yang digunakan untuk mengatur warna latar belakang di belakang perbatasan.
• padding-kotak: Ini digunakan untuk menyesuaikan warna di dalam kotak padding elemen.
• kotak-konten: Ini digunakan untuk mengatur warna latar belakang sesuai dengan konten elemen.

Contoh

Kami akan melanjutkan contoh sebelumnya dan mengubah nilai gaya perbatasan menjadi “ burik ” untuk memahami properti klip latar. Setelah itu, kita akan mengatur nilai properti background-clip sebagai “ padding-kotak ”:

div {

...

klip latar belakang : padding-kotak ;

}

Output menandakan bahwa warna latar belakang putih muncul ketika tepi perbatasan berakhir:

Properti lampiran latar belakang CSS

' lampiran-latar belakang Properti ” digunakan untuk mengatur perilaku atau gambar saat menggulir halaman. Perilakunya dapat diatur bergulir dengan elemen lain atau diperbaiki.

Sintaksis

Sintaks dari properti background-attachment adalah:

lampiran-latar belakang : nilai

Anda dapat mengatur nilai lampiran latar belakang sebagai “ tetap ” untuk memperbaiki gambar latar belakang atau “ menggulir ” untuk mengizinkan gambar bergulir bersama halaman.

Catatan: Secara default, nilai properti lampiran latar belakang ditetapkan sebagai “ menggulir ”.

Dapat dilihat bahwa gambar latar yang ditambahkan tidak statis ketika kita telah menggulir. Sekarang mari kita perbaiki masalah ini.

Untuk melakukannya, kami menetapkan nilai properti lampiran latar belakang sebagai “ tetap ”:

div {

...

lampiran-latar belakang : tetap ;

}

Berikut adalah hasil yang menunjukkan bahwa gambar telah diperbaiki:

Sekarang, menuju perbandingan antara background dan background-color properties.

Latar belakang CSS vs warna latar belakang

Tabel yang diberikan akan membedakan properti background dan background-color berdasarkan fiturnya:

Fitur	latar belakang CSS	Warna latar belakang CSS
Jenis	Ini adalah properti super.	Ini adalah sub-properti dari properti latar belakang.
Kegunaan	Ini mengatur semua properti latar belakang.	Ini hanya mengatur warna latar belakang.
Jangkauan	Ini mendukung semua properti latar belakang	Ini hanya mendukung properti warna latar belakang
Tingkat	Saat Anda perlu menambahkan beberapa nilai latar belakang, itu mudah digunakan. Anda dapat mengatur nilai semua properti latar belakang sekaligus.	Ini dapat digunakan ketika Anda hanya perlu menambahkan satu warna latar belakang.
Sintaksis	latar belakang: nilai (Nilainya adalah bg-color, bg-image, dan properti lainnya)	latar belakang-warna: warna

Telah dijelaskan bagaimana properti warna latar berbeda dari properti latar belakang.

Kesimpulan

CSS “ Latar Belakang ” adalah properti singkatan yang digunakan untuk mengatur beberapa nilai latar belakang sekaligus, seperti warna, gambar, posisi, ukuran, asal, dan lainnya. Di samping itu, ' warna latar belakang ” hanya digunakan untuk menambahkan warna pada latar belakang. Dalam panduan ini, kita telah membahas perbedaan antara properti CSS background dan properti CSS background-color.