Anda mungkin berpikir bahwa desain latar belakang itu sederhana, tetapi CSS memiliki banyak properti yang tidak jelas dan kuat untuk Anda pelajari.

Tema latar belakang situs web Anda dapat memengaruhi tampilan dan nuansanya secara signifikan. Warna, gambar, dan pola latar belakang memunculkan emosi dan menciptakan pengalaman pengguna yang luar biasa.

Anda dapat menggunakan properti latar belakang CSS untuk mengatur gaya latar belakang elemen HTML. Pelajari semua tentang beberapa properti CSS yang dapat Anda gunakan untuk membuat latar belakang yang luar biasa.

1. warna latar belakang

Itu properti warna latar belakang mengatur warna latar belakang suatu elemen. Anda dapat mengatur warna menggunakan nama seperti "merah", nilai HEX seperti "#00FF00" atau nilai RGB - seperti "rgb (0, 255, 0)". Anda juga dapat menggunakan nilai HSL untuk mengatur warna latar belakang menggunakan hue, saturation, dan lightness.

Contoh berikut menyetel warna latar belakang seluruh halaman menjadi oranye. Elemen judul masing-masing mendapatkan latar belakang yang berbeda.

instagram viewer 
<tubuh>
<h2>Saya Hijauh2>
<h3>saya Merahh3>
<h4>Saya Biruh4>
tubuh>

Menggunakan CSS, Anda dapat menerapkan warna latar belakang yang unik untuk setiap elemen:

tubuh {
warna latar belakang: oranye;
}
h2 {
warna latar belakang: #006600;
}


h3 {
warna latar belakang: rgb(128, 0, 0);
}
h4{
warna latar belakang: hsl(240, 100%, 50%);
}

Ini akan menata halaman agar terlihat seperti:

Anda dapat menggunakan properti opacity untuk menentukan transparansi suatu elemen. Opacity mengambil nilai antara 0,0 dan 1,0. Semakin rendah nilainya, semakin transparan elemen tersebut.

Sebagai contoh, coba atur opacity elemen body menjadi 0,5:

tubuh {
warna latar belakang:oranye;
kegelapan:0.5;
}

Ini akan ditampilkan sebagai berikut — bandingkan warnanya dengan yang ada di tangkapan layar sebelumnya:

2. gambar latar belakang

Properti background-image menetapkan gambar sebagai latar belakang suatu elemen. Anda dapat mereferensikan gambar lokal atau gambar dari internet.

<tubuh>
 <h1>Halodi sana!h1>
 <P>SAYAmemilikisebuahgambardi dalam-kulatar belakang!P>
tubuh>

File CSSnya:

tubuh {
gambar latar belakang:url("https://gambar-gambar.pexels.com/foto/1191710/pexels-photo-1191710.jpeg?mobil=kompres&cs=tinysrgb&w=1260&H=750&dpr=1");
}

Ini akan ditampilkan seperti ini:

Anda juga bisa menggunakan gradien latar belakang untuk membuat tampilan unik untuk aplikasi Anda.

3. background-repeat

Properti background-image mengulang gambar secara default. Anda dapat memilih untuk mengulang gambar secara horizontal pada sumbu x atau vertikal pada sumbu y.

Alternatifnya, jika pengulangan tidak sesuai dengan gaya Anda, Anda dapat menghapusnya menggunakan nilai no-repeat.

<tubuh>
<h1>Halo yang disana!h1>
<h3>Saya mendemonstrasikan properti repeat background-repeat pada sumbu x!h3>
tubuh>

Gunakan CSS berikut untuk menerapkan latar belakang berulang di sepanjang sumbu x:

tubuh {
gambar latar belakang: url("https://gambar-gambar.pexels.com/foto/459335/pexels-photo-459335.jpeg?mobil=kompres&cs=tinysrgb&w=1260&H=750&dpr=1");
background-repeat: ulangi-x;
}

Hasil:

Selanjutnya, coba ulangi gambar pada sumbu y:

tubuh {
gambar latar belakang:url("https://cdn.pixabay.com/foto/2016/04/18/22/05/kerang-1337565__340.jpg");
background-repeat: ulangi-y;
}

Hasil:

Contoh pada sumbu y tentu terlihat terdistorsi. Jika ini bukan pola yang Anda cari, Anda dapat menentukannya no-repeat alih-alih:

tubuh {
gambar latar belakang:url("https://gambar-gambar.pexels.com/foto/259915/pexels-photo-259915.jpeg?mobil=kompres&cs=tinysrgb&w=600");
background-repeat: jangan ulangi;
}

Hasil:

4. background-position

Properti background-position menentukan posisi gambar latar belakang di dalam elemennya. Ini menggunakan kata kunci khusus posisi seperti tengah, atas, Dan dasar, atau nilai piksel atau persentase.

Tambahkan properti background-position ke gambar terakhir:

tubuh {
gambar latar belakang: url("https://gambar-gambar.pexels.com/foto/259915/pexels-photo-259915.jpeg?mobil=kompres&cs=tinysrgb&w=600");
background-position: atastengah;
}

Ini akan terlihat seperti ini:

Anda dapat melihat gambar mendistorsi tampilan situs web. Mari kita perbaiki dengan properti berikutnya.

5. background-size

Anda dapat menggunakan properti gambar latar belakang untuk menentukan ukuran gambar tertentu. Ini menggunakan kata kunci seperti menutupi Dan berisi atau piksel atau nilai persentase. Mari perbaiki gambar latar belakang yang terdistorsi dengan menambahkan properti ukuran latar belakang.

tubuh {
 gambar latar belakang: url(" https://images.pexels.com/photos/259915/pexels-photo-259915.jpeg? otomatis=kompres&cs=tinysrgb&w=600");
 background-repeat: no-repeat;
 background-position: center;

Hasilnya menunjukkan bahwa gambar sekarang menutupi halaman web secara proporsional.

6. background-attachment

Properti background-attachment menentukan apakah posisi gambar latar belakang tetap atau bergulir. Anda dapat menggunakan kata kunci fixed atau scroll.

Mari kita tunjukkan dalam kode berikut:

<tubuh>
<h1>Properti background-attachmenth1>
<P>Dengan properti lampiran tetap, Anda akan melihat bahwa latar belakang tidak bergerak bersama teks.P>
<P>Dengan properti lampiran tetap, Anda akan melihat bahwa latar belakang tidak bergerak bersama teks.P>
<P>Dengan properti lampiran tetap, Anda akan melihat bahwa latar belakang tidak bergerak bersama teks.P>
<P>Dengan properti lampiran tetap, Anda akan melihat bahwa latar belakang tidak bergerak bersama teks.P>
<P>Dengan properti lampiran tetap, Anda akan melihat bahwa latar belakang tidak bergerak bersama teks.P>
<P>Dengan properti lampiran tetap, Anda akan melihat bahwa latar belakang tidak bergerak bersama teks.P>
<P>Dengan properti lampiran tetap, Anda akan melihat bahwa latar belakang tidak bergerak bersama teks.P>
<P>Dengan properti lampiran tetap, Anda akan melihat bahwa latar belakang tidak bergerak bersama teks.P>
<P>Dengan properti lampiran tetap, Anda akan melihat bahwa latar belakang tidak bergerak bersama teks.P>
<P>Dengan properti lampiran tetap, Anda akan melihat bahwa latar belakang tidak bergerak bersama teks.P>
<P>Dengan properti lampiran tetap, Anda akan melihat bahwa latar belakang tidak bergerak bersama teks.P>
<P>Dengan properti lampiran tetap, Anda akan melihat bahwa latar belakang tidak bergerak bersama teks.P>
tubuh>

File CSSnya:

tubuh {
gambar latar belakang: url("https://gambar-gambar.pexels.com/foto/96627/pexels-photo-96627.jpeg?mobil=kompres&cs=tinysrgb&w=600");
background-repeat: no-repeat;
background-position: tengah;
background-size: menutupi;
background-attachment: tetap;
}

Jika Anda bergerak ke bawah halaman, Anda akan melihat latar belakang tidak bergerak:

Untuk mendemonstrasikan properti scroll background-attachment, ubah kata kunci menjadi menggulir. Anda akan melihat bahwa sekarang latar belakang bergerak dengan teks.

tubuh {
gambar latar belakang: url("https://gambar-gambar.pexels.com/foto/96627/pexels-photo-96627.jpeg?mobil=kompres&cs=tinysrgb&w=600");
background-repeat: no-repeat;
background-position: tengah;
background-size: menutupi;
background-attachment: menggulir;
}

7. Properti Singkatan latar belakang

Anda mungkin memperhatikan bahwa Anda perlu menyertakan beberapa properti untuk mendapatkan latar belakang yang sempurna. Ini melibatkan penulisan banyak kode. Tetapi Anda dapat mempersingkat kode menggunakan properti singkatan latar belakang.

Properti steno memungkinkan Anda mengatur banyak properti latar belakang dalam satu baris. Anda menggunakan kata kunci latar belakang untuk mengatur properti steno.

Misalnya, alih-alih menulis kode seperti ini:

tubuh {
warna latar belakang: hijau;
gambar latar belakang: url("laptop3.jpg");
background-repeat: no-repeat;
background-size: menutupi;
lampiran latar belakang: menggulir;
background-position: tengah;
}

Anda dapat menulisnya dalam satu baris, seperti ini:

tubuh {
latar belakang: hijauurl("laptop3.jpg") no-repeatmenutupimenggulirtengah;
}

Properti steno mengikuti urutan tertentu. Anda harus menyelaraskan properti dalam urutan itu meskipun satu atau lebih tidak ada. Urutannya adalah:

  • warna latar belakang
  • gambar latar belakang
  • background-repeat
  • background-attachment
  • background-position

Anda dapat membuat desain yang menarik dengan CSS menggunakan berbagai pola latar belakang. Dengan pola ini, Anda dapat memperoleh latar belakang yang unik dan luar biasa untuk situs web Anda.

Properti Latar Belakang Lainnya di CSS

CSS sangat kuat dan ada banyak hal yang dapat Anda lakukan dengannya untuk membumbui aplikasi Anda. Anda dapat menggunakan properti seperti background-clip, background-origin, dan background-blend-mode untuk menambahkan beberapa animasi.

Anda juga dapat menggunakan gradien dan pola untuk menyesuaikan halaman Anda. Bereksperimenlah dengan properti latar belakang CSS untuk mempertajam keterampilan desain web Anda.