Banyak layout baru, hanya mendapatkan ke jantung membuat situs, sering bertanya-tanya bagaimana html untuk membuat gambar latar belakang.Dan jika beberapa dari mereka dapat menangani masalah ini, Anda masih memiliki masalah selama peregangan seluruh lebar gambar pada monitor.Pada saat yang sama saya ingin melihat situs yang ditampilkan di semua browser, sehingga harus memenuhi persyaratan krossbrauzernosti.Anda dapat mengatur latar belakang dalam dua cara: dengan menggunakan tag HTML dan gaya CSS.Masing-masing untuk dirinya memilih pilihan terbaik.Tentu saja, gaya CSS jauh lebih nyaman, karena kode tersebut disimpan dalam file terpisah dan tidak memakan speaker tambahan di tag situs utama, tapi pertama mempertimbangkan metode sederhana pengaturan gambar latar belakang di situs.
tag HTML dasar untuk membuat latar belakang
Jadi, pergi ke pertanyaan tentang bagaimana membuat gambar latar belakang ke html di layar.Dalam rangka untuk melihat situs yang indah, Anda perlu memahami detail agak penting: itu hanya cukup untuk membuat latar belakang gradien atau warna solid untuk melukis, tapi jika Anda ingin memasukkan gambar ke latar belakang, itu tidak akan meregangkan lebar penuh monitor.Gambar awalnya diperlukan untuk mengambil atau membuat desain sendiri dengan ekstensi ini, di mana Anda akan menampilkan halaman.Hanya ketika gambar latar belakang siap, memindahkannya ke sebuah folder bernama «Gambar».Di dalamnya, kita akan menyimpan semua gambar yang digunakan, animasi, dan file gambar lainnya.Folder ini harus dalam direktori root dari file dengan semua html Anda.Sekarang Anda dapat beralih ke kode.Ada beberapa pilihan untuk kode perekaman dimana pola akan berubah gambar.
- tag Write atribut.
- melalui gaya CSS dalam kode HTML.
- gaya Menulis CSS di file terpisah.
Cara HTML untuk membuat gambar latar belakang, bagi Anda untuk memutuskan, tapi saya ingin mengatakan beberapa kata tentang bagaimana hal itu akan menjadi yang paling optimal.Metode pertama adalah dengan menulis melalui tag telah lama usang.Pilihan kedua digunakan sangat jarang, karena ternyata banyak kode yang sama.Pilihan ketiga adalah yang paling umum dan efektif.Berikut contoh tag HTML:
- metode pertama merekam melalui tag (tubuh) dalam file index.htm.Hal ini ditulis dalam bentuk ini: (body background = "Nazvanie_papki / Nazvanie_kartinki.rasshirenie") (/ body).Artinya, jika kita memiliki gambar dengan nama «Gambar» dan ekstensi JPG, dan folder kita bernama «Gambar», maka catatan HTML-kode akan terlihat seperti ini: (body background = "Images / Picture.jpg") ... (/ body).Metode kedua
- melibatkan perekaman styling CSS, tetapi ditulis dalam file yang sama dengan nama index.htm.(body style = "background: url ('Gambar ../ / Picture.jpg')").
- Dan metode ketiga rekaman dibuat dalam dua file.Dokumen dengan tag nama index.htm (kepala) ditulis garis seperti: (kepala) (link rel = "stylesheet" type = "text / css" href = "Put_k CSS_faylu") (/ head).Sebuah file bernama style.css gaya sudah menulis: body {background: url (Images / Picture.jpg ')}.
Cara HTML untuk membuat gambar latar belakang, kita bahas.Sekarang Anda perlu mencari tahu bagaimana melakukan peregangan gambar seluruh lebar seluruh layar.Metode
peregangan wallpaper pada lebar jendela
bayangkan layar kami dalam bentuk persentase.Ternyata bahwa seluruh panjang dan lebar layar akan 100% x 100%.Kita perlu untuk meregangkan gambar dengan lebar ini.Tambahkan ke merekam gambar dalam file baris style.css yang akan meregangkan gambar untuk seluruh lebar dan panjang monitor.Seperti yang tertulis dalam gaya CSS Anda?Ini sederhana!
tubuh
{
background: url (Images / Picture.jpg ')
background-size: 100%;/ * Posting ini sesuai untuk kebanyakan browser modern * /
}
Jadi kita tahu bagaimana membuat latar belakang gambar ke html di layar.Ada metode pencatatan dalam file index.htm.Meskipun metode ini dan usang, tapi untuk pemula perlu mengetahui dan memahami.Tag (kepala) (gaya) div {background-size: penutup;} (/ Style) (/ head), catatan ini berarti bahwa kita mengalokasikan unit khusus untuk latar belakang, yang akan berada di atas seluruh lebar jendela.Kami telah mempertimbangkan dua cara untuk membuat situs background gambar html, gambar membentang dengan lebar penuh layar di salah satu browser modern.
Cara membuat background tetap
Jika Anda memutuskan untuk menggunakan gambar sebagai latar belakang masa depan sumber daya web, maka Anda hanya perlu tahu bagaimana membuatnya tetap, sehingga tidak meregang panjang dan tidak merusak penampilan estetika.Hanya dengan menggunakan kode HTML untuk mendaftarkan tambahan kecil.Anda perlu style.css file untuk menambahkan satu kalimat setelah latar belakang: url (Images / Picture.jpg ') tetap;atau sebaliknya ditambahkan setelah titik koma baris terpisah - position: fixed.Dengan demikian, wallpaper Anda akan tetap.Selama bergulir situs konten, Anda akan melihat bahwa baris teks bergerak, tapi latar belakang tetap di tempat.Jadi Anda belajar bagaimana html untuk membuat gambar latar belakang, dalam beberapa cara.
bekerja dengan tabel di HTML
Banyak pengembang web berpengalaman, berhadapan dengan meja dan unit sering tidak memahami bagaimana html untuk membuat gambar tabel latar belakang.Seperti semua tim HTML dan CSS gaya, bahasa pemrograman web cukup sederhana.Dan solusi untuk masalah ini adalah untuk menulis beberapa baris kode.Anda harus sudah tahu bahwa menulis tabel baris dan kolom, masing-masing, seperti yang ditunjukkan oleh tag (tr) dan (td).Untuk membuat latar belakang meja dalam bentuk gambar, perlu untuk menambah tag (tabel), (tr) atau (td) frase sederhana dengan mengacu pada gambar: background = URL gambar.Untuk kejelasan, kami memberikan beberapa contoh.Tabel
dengan gambar latar belakang sebagai gantinya: contoh HTML
Menggambar tabel 2x3 dan membuatnya gambar latar belakang yang disimpan di folder "Images": (table background = "Images / Picture.jpg") (tr) (td)1 (/ td) (td) 2 (/ td) (td) 3) (/ td) (/ tr) (tr) (td) 4 (/ td) (td) 5 (/ td) (td) 6 (/ td) (/ tr) (/ tabel).Jadi meja kami akan ditarik di latar belakang gambar.
Sekarang menggambar piring yang sama ukuran 2x3, tetapi menyisipkan gambar dalam kolom nomor 1, 4, 5 dan 6. (tabel) (tr) (background td = "Images / Picture.jpg") 1 (/ td)(td) 2 (/ td) (td) 3 (/ td) (/ tr) (tr) (td background = "Images / Picture.jpg") 4 (/ td) (td background = "Images / Picture.jpg") 5 (/ td) (td background =" Images / Picture.jpg ") 6 (/ td) (/ tr) (/ tabel).Setelah menonton dapat melihat bahwa latar belakang hanya muncul di sel-sel, di mana kita telah terdaftar, tetapi tidak seluruh tabel.
situs Cross-browser
Ada hal seperti sumber daya web kompatibilitas cross-browser.Ini berarti bahwa halaman situs akan sama baiknya ditampilkan dalam jenis dan versi browser yang berbeda.Ini harus HTML Kode dan CSS untuk menyesuaikan gaya yang dibutuhkan oleh browser.Selain itu, di era modern ponsel pintar, banyak pengembang web mencoba untuk membuat situs yang diadaptasi dan versi mobile dari komputer dan tampilan.
