Tutorial Ukuran Imej Latar Belakang CSS - Cara Mengekod Gambar Latar Belakang Halaman Penuh

Tutorial ini akan menunjukkan cara mudah untuk membuat kod gambar latar belakang halaman penuh menggunakan CSS. Anda juga akan belajar bagaimana membuat gambar itu responsif terhadap ukuran skrin pengguna anda.

Membuat gambar latar sepenuhnya untuk merangkumi keseluruhan ruang pandang penyemak imbas adalah tugas biasa dalam reka bentuk web. Nasib baik, tugas ini dapat diselesaikan dengan beberapa baris CSS.

Tutup Pandangan dengan Gambar

Pertama, kami ingin memastikan halaman kami benar-benar merangkumi keseluruhan viewport:

html { min-height: 100%; }

Di dalam html, kami akan menggunakan background-imageharta tanah untuk menetapkan gambar:

background-image: url(image.jpg); /*replace image.jpg with path to your image*/

Keajaiban Harta 'Saiz Latar Belakang'

Keajaiban berlaku dengan background-sizeharta benda:

background-size: cover;

covermemberitahu penyemak imbas untuk memastikan gambar sentiasa meliputi seluruh bekas, dalam kes ini html. Penyemak imbas akan menutup bekas walaupun perlu meregangkan gambar atau memotong sedikit dari tepi.

Kerana penyemak imbas boleh meregangkan gambar, anda harus menggunakan gambar latar yang mempunyai resolusi yang cukup tinggi. Jika tidak, gambar itu mungkin kelihatan berpiksel.

Sekiranya anda berminat untuk melihat semua gambar muncul di latar belakang, maka anda ingin memastikan bahawa gambar itu relatif dekat dengan nisbah aspek berbanding dengan ukuran layar.

Cara Memperbaiki Kedudukan Gambar dan Mengelakkan Jubin

Penyemak imbas juga boleh memilih untuk menampilkan gambar latar anda sebagai jubin bergantung pada ukurannya. Untuk mengelakkan perkara ini berlaku, gunakan no-repeat:

background-repeat: no-repeat;

Untuk memastikan keadaan sentiasa cantik, kami akan memastikan imej kami sentiasa terpusat:

background-position: center center;

Ini akan memusatkan imej secara mendatar dan menegak setiap masa.

Kami kini telah menghasilkan imej yang responsif sepenuhnya yang akan merangkumi keseluruhan latar belakang:

html { min-height: 100%; background-image: url(image.jpg); background-size: cover; background-repeat: no-repeat; background-position: center center; } 

Cara Memperbaiki Imej di Tempat Semasa Menatal

Sekarang, sekiranya anda ingin menambahkan teks di atas gambar latar dan teks itu melimpah ruang pandang semasa, anda mungkin ingin memastikan gambar anda tetap berada di latar belakang ketika pengguna menatal ke bawah untuk melihat sisa teks:

background-attachment: fixed;

Anda boleh memasukkan semua sifat latar belakang yang dijelaskan di atas menggunakan notasi pendek:

background: url(image.jpg) center center cover no-repeat fixed;

Pilihan: Cara Menambah Pertanyaan Media untuk Mudah Alih

Untuk menambahkan sedikit lapisan gula pada kek, anda mungkin ingin menambahkan pertanyaan media untuk skrin yang lebih kecil:

@media only screen and (max-width: 767px) { html { background-image: url(smaller-image.jpg); } } 

Anda boleh menggunakan Photoshop atau beberapa perisian penyuntingan gambar lain untuk mengecilkan gambar asal anda untuk meningkatkan kelajuan muat halaman pada sambungan internet mudah alih.

Oleh itu, setelah anda mengetahui keajaiban membuat latar belakang gambar halaman penuh responsif, sudah tiba masanya untuk membuat beberapa laman web yang indah!

Ingin Melihat Lebih Banyak Petua dan Pengetahuan Pembangunan Web?

  • Langgan buletin mingguan saya
  • Lawati blog saya di 1000 Mile World
  • Ikuti saya di Twitter