Postingan lainnya
Buku Ini Koding!
Baru!
Buku ini akan jadi teman perjalanan kamu belajar sampai dapat kerjaan di dunia programming!
Kelas Premium!
Belajar bikin website dari nol sekarang
Gunakan kupon "lebihcepat" untuk diskon 25%!
Cara membuat Background Image Full Screen di web
Agan-agan, mau tanya, cara supaya gambar di Background Tag Body HTML full screen gimana yaa gan. Ini Code yang saya buat, apa yang perlu di tambah?
body{
background-color: black;
background-image: url('bg.png');
background-repeat: no-repeat;
background-attachment :fixed;
background-size: contain;
background-position: center;
}
Terima Kasih.
Tanggapan
ukuran gambar paling kurang harus sama dengan ukuran background yang di inginkan
3 Jawaban:
<div>Perlu di tambahkan property height dan nilainya harus 100vh<br><br></div><pre>body{
height: 100vh;
background-color: black;
background-image: url('bg.png');
background-repeat: no-repeat;
background-attachment :fixed;
background-size: contain;
background-position: center;
}</pre>
Tanggapan
ga bisa om, gambar masih blm full screen.
cek lokasinya filenya
<div>ukuran gambar (height) udah di setting dari 100px, 200px, sampai 1000px. tapi ukuran gambar tetep tidak berubah, hanya ukuran layar yang berubah.<br><br>cek lokasi gambar udah aman kok, </div>
Jawaban Terpilih
<div>coba ganti background-size jadi cover<br>lebih baik lagi kalau yang di-style html tag-nya; karena ukuran height-nya mendekati window browser-nya.<br><br></div><pre>html { background: url(bg.jpg) no-repeat center center fixed; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; }</pre>
Tanggapan
Ini jawaban terbaik, makasih om, udah terjawab