Cara Meregangkan Latar Belakang Situs Web

Daftar Isi:

Cara Meregangkan Latar Belakang Situs Web
Cara Meregangkan Latar Belakang Situs Web

Video: Cara Meregangkan Latar Belakang Situs Web

Video: Cara Meregangkan Latar Belakang Situs Web
Video: Cara Merapihkan Tampilan Website di Wordpress 2024, November
Anonim

Bahasa markup HTML memungkinkan perancang web untuk menggunakan gambar apa pun sebagai gambar latar. Namun, bahasa itu sendiri tidak memiliki kontrol bawaan untuk gambar latar belakang. Penyetelan lebih baik dilakukan dengan menggunakan cascading CSS stylesheet.

Cara meregangkan latar belakang situs web
Cara meregangkan latar belakang situs web

instruksi

Langkah 1

Untuk membuat latar belakang membentang ke lebar penuh browser, Anda perlu menggunakan parameter z-index di CSS Anda. Ini memungkinkan Anda untuk mengatur urutan elemen yang Anda buat. Semakin tinggi nilai atribut ini, semakin tinggi blok akan ditempatkan pada halaman.

Langkah 2

Buat dokumen baru dalam format html dan css (tombol kanan mouse - "Baru" - "File teks") dan buka menggunakan editor teks apa pun.

Langkah 3

Tempatkan gambar latar belakang di lapisan bawah. Ini akan meregang tergantung pada resolusi layar. Di bagian atas, elemen lain akan ditempatkan di mana konten halaman akan ditampilkan. Untuk melakukan ini, buat dua blok. Dalam file css tulis:.1layer {z-index: 1; width: 100% height: 100% position: absolute;}.2layer {Position: absolute; z-index: 2; } Posisi: parameter absolut memungkinkan Anda untuk mengatur posisi absolut, mis. lapisan akan diposisikan secara independen dari elemen lain.

Langkah 4

Sertakan kode CSS yang dihasilkan dalam file HTML menggunakan tag tautan: Latar belakang halaman

Langkah 5

Buat lapisan baru. Menggunakan tag

letakkan gambar di atasnya. Misalnya: Konten halaman Untuk img, hanya parameter lebar yang ditentukan, karena jika Anda menentukan tinggi tambahan, di beberapa browser, distorsi gambar akan muncul.

Langkah 6

Simpan perubahan Anda. Untuk menguji kode Anda, perbesar halaman di jendela browser Anda. Gambar latar belakang juga harus diperbesar.

Direkomendasikan: