بِسْمِ اللّهِ
السَّلاَمُ عَلَيْكُمْ وَرَحْمَةُ اللهِ وَبَرَكَاتُهُ
Pada pertemuan kali ini kita akan melanjutkan kembali materi mengenai CSS Background, yang telah kita pelajari pada pertemuan sebelumnya.
3. CSS IMAGE BACKGROUND POSITION
Untuk sub materi ini, kita akan mempelajari script / code style untuk menentukan posisi gambar latar pada halaman web / HTML.
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");
background-repeat: no-repeat;
background-position: right top;
margin-right: 200px; Pada file CSS ditambahkan script / code background-position : right top ;difungsikan untuk menempatkan gambar latar pada posisi kanan atas (lihat hasil pada gambar diatas).
4. CSS IMAGE BACKGROUND ATTACHMENT
Jika sebelumnya kita menentukan posisi letak gambar, maka pada sub materi ini kita akan mempelajari metode pelampiran gambarnya apakah diam, tetap pada posisinya, atau bergerak, tetap pada posisinya. Untuk lebih jelasnya perhatikan gambar dan script 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>
<p>SMA ADI LUHUR</p>
<p>SMA ADI LUHUR</p>
<p>SMA ADI LUHUR</p>
<p>SMA ADI LUHUR</p>
<p>SMA ADI LUHUR</p>
<p>SMA ADI LUHUR</p>
<p>SMA ADI LUHUR</p>
<p>SMA ADI LUHUR</p>
<p>SMA ADI LUHUR</p>
<p>SMA ADI LUHUR</p>
<p>SMA ADI LUHUR</p>
<p>SMA ADI LUHUR</p>
<p>SMA ADI LUHUR</p>
</body>
</html>
body {
background-image: url("tanah.jpg");
background-repeat: no-repeat;
background-position: right top;
margin-right: 200px;
background-attachment: fixed;
} Pada script/kode CSS diatas dapat dilihat bahwa pada saat halaman web / HTML digeser kebawah / down scroll maka gambar latar tetap pada posisinya namun bergerak mengikuti halaman, hal ini dikarenakan pada file CSS ditambahkan script /kode background-attachment: fixed;. Sedangkan pada contoh script / kode dibawah ini gambar latar tetap pada posisinya namun diam terhadap pergerakkan layar (tidak mengikuti).
Pada contoh script diatas pada file CSS ditambahkan script [ background-attachment: scroll ] sehingga gambar latar tetap diam pada posisi nya tidak mengikuti pergeseran halaman.
Sekian pertemuan kita pada kali ini, untuk materi CSS Background. Tetap semangat belajar, jaga kesehatan, dan kurangi / hindari segala aktifitas diluar rumah sebagai bentuk proteksi diri dalam memerangi pandemi CoViD-19.
