01 Maret 2018

Background Image CSS

A. PENDAHULUAN

       Pada postingan ini saya akan membahas mengenai Background Image CSS. Saya akan memberi contoh cara memasang gambar sebagai background di CSS.


B. PENGERTIAN

        Background, atau yang dikenal dengan latar belakang, merupakan salah satu komponen desain yang cukup penting. Background terutama digunakan untuk memberikan dekorasi visual terhadap sebuah elemen, yang akan mengakibatkan peningkatan kemudahan nalar atau pengertian akan sebuah konten. Background memiliki pengaruh yang sangat besar terhadap keseluruhan desain dari sebuah website karena hal ini.
Penambahan latar belakang ke sebuah elemen dapat dilakukan dengan banyak cara, mulai dari penambahan warna (yang telah dilakukan berkali-kali pada bab sebelumnya), penambahan gambar, ataupun penggabungan dari keduanya. CSS memberikan kita kemampuan penuh untuk mengatur bagaimana penampilan dari latar belakang sebuah elemen, sehingga kita dapat dengan mudah meningkatkan keindahan visual dari elemen tersebut.

C. MAKSUD DAN TUJUAN

        Dapat mengerti  cara membuat gambar menjadi background halaman web menggunakan css.


D. PEMBAHASAN

       kita akan mencoba menerapkan cara membuat gambar sebagai  background di halaman web. oke langsung saja kalian praktekkan :
1. pilih gambar dan masukkan gambar di dalam satu folder yang akan kita isi dengan file script html nya.

2. ketikkan script berikut ini , untuk nama format gambar bisa kalian ganti sesua dengan nama file gambar kalian (yang bold di script).

<!DOCTYPE html>
<html>
<head>
<style>
body {
    background-image: url("unnamed.jpg");
}
</style>
</head>
<body>

<h1>Hello World!</h1>

<p>This page has an image as the background!</p>

</body>
</html>


hasilnya :


E. MASALAH YANG DITEMUKAN

        Tempat simpan gambar yang tidak satu folder dengan file html akan membuat gambar tidak muncul.


F. KESIMPULAN

       body {
    background-image: url("unnamed.jpg");
}


 Script di atas Digunakan untuk memasukkan gambar sebagai background.

G. REFERENSI

     -

 Sekian dan Terima Kasih karena sudah membaca Blog saya yang Sederhana Ini 😁 Jika ada salah arti atau kata bisa beri komentar kalian di kolom komentar.....

Tidak ada komentar:

Posting Komentar