بِسْمِ اللّهِ
السَّلاَمُ عَلَيْكُمْ وَرَحْمَةُ اللهِ وَبَرَكَاتُهُ
Pada pertemuan kali ini kita akan mempelajari mengenai CSS Background, yang akan kita bagi menjadi beberapa sub materi pelajaran. Beberapa bagian diantaranya merupakan materi yang telah kita pelajari pada materi HTML Colors, maka pada pertemuan kali ini kita akan sedikit mengulang untuk mengingat kembali pelajaran yang telah lalu.
1. CSS COLORS BACKGROUND
Untuk sub materi ini, isi materinya hampir sama dengan materi HTML Colors, dimana kita mempelajari cara memberikan warna latar pada tulisan/text atau memberikan warna latar pada halaman html/web dengan menggunakan script/kode Style/CSS pada lembar halaman HTML atau terpisah menggunakan file CSS tersendiri.
BARIS KODE PADA FILE HTML
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="colors.css">
</head>
<body>
<h1 id="bg1">SMA ADI LUHUR</h1>
<p id="bg2">LPK ADI LUHUR - TEKNOLOGI INFORMASI DAN KOMUNIKASI
</p>
<h1 id="bo">SMA ADI LUHUR</h1>
</body>
</html> BARIS KODE PADA FILE CSS
#bg1 {
background-color: DodgerBlue;
}
#bg2 {
background-color: Tomato;
}
#bo {
border: 2px solid Tomato;
} HASIL
PENJELASAN CODE :
1. Untuk text SMA ADI LUHUR pada script html mendapatkan style CSS Background Color berwarna DodgerBlue dengan ID CSS “bg1”.
2. Untuk text LPK ADI LUHUR pada script html mendapatkan style CSS Background Color berwarna Tomato dengan ID CSS “bg2”.
3. Untuk text TEKNOLOGI INFORMASI DAN KOMUNIKASI pada script html mendapatkan style CSS Border berwarna Tomato dengan ID CSS “bo”.
2. CSS IMAGE BACKGROUND
Sama seperti halnya CSS Colors Background, yaitu memberikan style background/latar pada halaman HTML/Web, hanya saja pada style ini background/latar halaman html merupakan sebuah file gambar. Untuk lebih jelasnya perhatikan contoh script/kode dibawah ini :
BARIS KODE PADA FILE HTML
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="image.css">
</head>
<body>
<h1>SMA ADI LUHUR</h1>
<h4>TEKNOLOGI INFORMASI DAN KOMUNIKASI</h4>
<p>LEMBAGA PENDIDIKAN KOMPUTER ADI LUHUR JAKARTA</p>
</body>
</html> BARIS KODE PADA FILE CSS
body {
background-image: url("tanah.jpg");
} 
Pada script/kode CSS diatas dilakukan penyisipan file gambar (tanah.jpg) pada halaman HTML/Web yang ditampilkan secara berulang sehingga menutupi seluruh halaman HTML/Web.
Pada contoh script diatas pada file CSS ditambahkan script [ background-repeat: no-repeat ] sehingga file gambar yang disisipkan sebagai latar/background ditampilkan sesuai ukuran aslinya tanpa ada pengulangan yang menutupi seluruh latar halaman.
Pada contoh script diatas pada file CSS ditambahkan script [ background-repeat: repeat-y ] sehingga file gambar yang disisipkan sebagai latar/background akan ditampilkan mengulang sepajang sumbu koordinat Y.
Pada contoh script diatas pada file CSS ditambahkan script [ background-repeat: repeat-x ] sehingga file gambar yang disisipkan sebagai latar/background akan ditampilkan mengulang sepajang sumbu koordinat X.
Sekian pertemuan kita pada kali ini, untuk sub materi CSS Background yang lain akan dilanjutkan pada pertemuan berikutnya. Tetap semangat belajar, jaga kesehatan, dan kurangi / hindari segala aktifitas diluar rumah sebagai bentuk proteksi diri dalam memerangi pandemi CoViD-19.
