Belajar HTML Dasar : Gambar Background


JogjaXploit - Kali ini kita akan melanjutkan belajar HTML Dasar. Belajar HTML Dasar mengenai Gambar Background, inilah yang akan kita pelajari bersama pada kesempatan ini. Bagi kalian yang baru belajar HTML, penting bagi kalian untuk Belajar HTML tentang background gambar.

Mengapa penting? karena kita bisa memberikan gambar pada latar belakang dari web kita.

Tujuan dari pemberian gambar pada latar belakang ini beragam sekali mulai dari untuk memperindah website dan sebagainya.

Bagi kalian yang belum mempelajari pembelajaran HTML sebelumnya, kalia bisa membaca dan mempelajari nya terlebih dahulu.

Baca Juga -> Belajar HTML Dasar : Gambar / Images.

Jika sudah, kita mulai pembelajarannya ya.

Gambar Background atau latar belakang pada HTML

Cara untuk menambahkan gambar pada background atau latar belakang, kalian dapat menambahkan atribut style dan memberikan properti CSS background-image. Lebih jelasnya lihat contoh di bawah.

Contoh



<div style="background-image: url('jogjaxploit.jpg');">


Yang mana kode url diatas merupakan alamat atau lokasi dari gambar kalian.

Hasil nya


Gambar background pada HTML

Atau kalian juga bisa menentukan gambar background nya pada elemen style tersendiri.


Contoh



<style>
div {
  background-image: url('jogjaxploit.jpg');
}
</style>

Untuk hasil nya sama saja. Hanya berbeda cara penulisan nya.

Memberikan Gambar Background pada Halaman

Untuk memberikan gambar pada background secara penuh pada halaman HTML, kalian dapat menentukan gambar nya pada elemen <body>

Contoh



<style>
body {
  background-image: url('jogjaxploit.jpg');
}
</style>

Penjelasan :

- Semua yang terdapat pada elemen body akan di berikan gambar pada latar belakang nya.

- Ubah 'jogjaxploit.jpg' dengan alamat gambar atau lokasi gambar kalian sendiri.

Hasil


Gambar latar belakang secara penuh pada halaman

Dapat kita lihat bahwa, satu halaman kini terdapat gambar pada latar belakang nya. Tapi mengapa gambar nya tidak full, melainkan ada dua yang mana satu nya hanya sebagian nya saja?. Akan kita bahas disini.

Jika ukuran gambar lebih kecil dari elemen HTML, gambar akan mengulang secara otomatis baik itu secara horizontal ( menyamping ) maupun vertikal ( tegak ).

Coba kita lihat contoh nya.

Lalu, bagaimana agar gambar tidak berulang?. Melainkan hanya satu gambar saja?.

Kalian dapat menggunakan atribut properti CSS yang namanya background-repeat.

Contoh



<style>
body {
  background-image: url('jogjaxploit.jpg');
  background-repeat: no-repeat;
}
</style>

Yang mana kita memberikan value, atau nilai pada properti background-repeat nya dengan no-repeat.

Hasil


Gambar background tidak terulang lagi

Sudah tidak terulang lagi kan?. Tapi kenapa gambarnya kecil, tidak full menyesuaikan ukuran layar?. Kita lanjut lagi pembelajarannya.

Menutupi seluruh elemen dengan gambar.

Untuk menutupi seluruh elemen HTML menggunakan gambar kalian, kalian dapat mengatur background-size dan nilai nya ( value ) nya cover

Dan kalian perlu menambahkan properti background-attachment dan isi value nya dengan fixed.

Contoh



<style>
body {
  background-image: url('jogjaxploit.jpg');
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: cover;
}
</style>

Hasil

gambar background pada HTML

Mengatur ukuran gambar background sesuai dengan ukuran layar

Kalian juga dapat mengatur agar gambar kalian menutupi seluruh halaman dan ukuran nya menyesuaikan dengan ukuran layar. Jika layar di perkecil, gambar juga akan ikut mengecil, begitu juga sebaliknya.

Cara nya yaitu dengan memberikan properti background-size dan value ( angka nya ) yaitu 100% 100%.

Contoh



<style>
body {
  background-image: url('jogjajxploit.jpg');
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: 100% 100%;
}
</style>

Hasil

gambar background responsive

Coba sekarang kalian kecil kan ukuran layar ( browser ). Maka gambar nya akan membesar dan mengecil sendiri secara otomatis mengikuti ukuran layar browser kalian.

Dengan ini kalian tidak perlu repot repot lagi menentukan ukuran gambar agar bisa responsive. Berikan value nya dengan 100% 100% maka gambar background kalian akan otomatis responsive.

Mungkin cukup sekian artikel kali ini mengenai Belajar HTML Dasar tentang background gambar. Jika ada yang perlu di tanyakan, silahkan bertanya melalui kolom komentar.

Terima kasih dan sampai jumpa.

2 Komentar

Silahkan Bertanya atau Beri Tanggapannya, Terima Kasih

Posting Komentar

Silahkan Bertanya atau Beri Tanggapannya, Terima Kasih

Post a Comment

Lebih baru Lebih lama

ads

ads