Bagaimana menciptakan: Gambar latar belakang halaman penuh

Belajar bagaimana menggunakan CSS untuk menciptakan gambar latar belakang halaman penuh.

Gambar latar belakang halaman penuh

Belajar bagaimana menciptakan gambar latar belakang yang menutupi seluruh jendela peramban. Contoh berikut menunjukkan gambar latar belakang yang responsif (dan setengah layar):

Demo - Gambar latar belakang halaman penuh

Demo - Gambar latar belakang setengah halaman

Bagaimana menciptakan gambar penuh tinggi

Gunakan elemen kontainer dan tambahkan gambar latar belakang dengan tinggi 100% ke kontainer tersebut.

Petunjuk:Dengan menggunakan 50% dapat menciptakan gambar latar belakang setengah halaman. kemudian gunakan atribut latar belakang berikut untuk menempatkan dan mengukur gambar dengan sempurna:

Perhatian:Untuk memastikan gambar menutupi seluruh layar, Anda harus mengatur height: 100% digunakan bersamaan <html> dan <body>:

Gambar latar belakang halaman penuh:

body, html {
  height: 100%;
}
.bg {
  /* Gambar yang digunakan */
  background-image: url("dancer.jpg");
  /* Panjang penuh */
  height: 100%;
  /* Dengan baik menempatkan dan mengukur gambar di tengah */
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

Coba sendiri

Gambar latar belakang halaman setengah:

.bg {
    height: 50%;
}

Coba sendiri