Situs bersarang: bagaimana membuat gambar latar belakang html

Banyak web designer pemula, hanya untuk menyelidiki esensi dari pembuatan situs, sering bertanya-tanya bagaimana melakukan gambar latar belakang html. Dan jika beberapa dari mereka dapat menangani masalah ini, itu masih merupakan masalah pada saat peregangan seluruh lebar gambar pada monitor. Pada saat yang sama saya ingin melihat situs yang ditampilkan identik pada semua browser, sehingga harus memenuhi persyaratan lintas-browser. 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 yang disimpan dalam file terpisah dan tidak memakan speaker ekstra dalam tag situs utama, tapi pertama mari kita perhatikan sebuah metode sederhana untuk menginstal gambar pada latar belakang situs.

tag HTML dasar untuk membuat latar belakang

Jadi, kita pergi ke pertanyaan tentang bagaimana membuat gambar latar belakang di html di layar. Dalam rangka untuk melihat situs yang indah, Anda harus memahami satu detail yang cukup penting: itu cukup hanya dengan membuat latar belakang gradien atau cat itu warna solid, tetapi jika Anda harus memasukkan gambar 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 situs. Hanya ketika gambar latar belakang siap, drag ke folder bernama «Gambar». Di dalamnya, kita akan menyimpan semua gambar yang digunakan, animasi dan file grafis lainnya. Folder ini harus terletak di direktori root dengan semua file html Anda. Sekarang Anda dapat melanjutkan dan untuk kode. Ada beberapa pilihan untuk menulis kode, dimana latar belakang akan mengubah gambar.

1. Menulis atribut tag.
2. Melalui gaya CSS dalam kode HTML.
3. Menulis gaya CSS di file terpisah.

Seperti dalam HTML untuk membuat gambar latar belakang, Anda memutuskan, tapi saya ingin mengatakan beberapa kata tentang bagaimana itu akan menjadi yang paling optimal. Metode pertama adalah dengan menulis melalui atribut tag telah lama usang. Pilihan kedua digunakan sangat jarang, karena ternyata banyak kode yang sama. Pilihan ketiga adalah yang paling umum dan efektif. Berikut adalah contoh dari tag HTML:

1. Metode rekaman pertama melalui atribut tag (body) dalam file index.htm. Hal ini disimpan dalam bentuk ini: (background body = "folder_name / Nazvanie_kartinki.rasshirenie") (/ body). Artinya, jika kita memiliki gambar dengan judul «Gambar» dan ekstensi JPG, dan folder kita yang bernama «Gambar», maka entri HTML-kode akan terlihat seperti ini: (background body = "Images / Picture.jpg") ... (/ body) .
2. Metode kedua melibatkan merekam gaya CSS, tapi ditulis dalam file yang sama dengan nama index.htm. (Body style = "background: url ( 'Gambar ../ / Picture.jpg')").
3. Metode ketiga rekaman dibuat dalam dua file. Dokumen dengan tag nama index.htm (kepala) ditulis baris seperti: (kepala) (link rel = "stylesheet" type = "text / css" href = "http: // situs / tulisan / 193.110 /% D0% 9F % D1% 83% D1% 82% D1% 8C_% D0% BA CSS_faylu ") (/ head). Sebuah file bernama gaya style.css sudah menulis: body {background: url (Images / Picture.jpg ')}.

Seperti dalam HTML untuk membuat gambar latar belakang, kita memahami. Sekarang Anda perlu mencari tahu bagaimana melakukan peregangan gambar seluruh lebar seluruh layar.

Cara untuk meregangkan gambar latar belakang dengan lebar jendela

Kami mewakili layar kami dalam bentuk persentase. Ternyata bahwa seluruh lebar dan panjang layar akan 100% × 100%. Kita perlu untuk meregangkan gambar dengan lebar ini. Menambah file gambar rekaman style.css baris yang akan meregangkan gambar atas seluruh lebar dan panjang monitor. Seperti yang tertulis dalam gaya CSS? Ini sederhana!

tubuh

{

background: url (Images / Picture.jpg ')

background-size: 100%; / * Posting ini sesuai untuk kebanyakan browser modern * /

}

Jadi kita tahu bagaimana untuk membuat latar belakang gambar di html di layar. Ada juga 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 diposisikan di atas seluruh lebar jendela. Kami telah mempertimbangkan dua cara, bagaimana membuat sebuah situs html gambar latar belakang, sehingga gambar membentang ke seluruh lebar layar di salah satu browser modern.

Cara membuat background tetap

Jika Anda memutuskan untuk menggunakan gambar sebagai latar belakang sumber daya web masa depan, maka Anda hanya perlu tahu bagaimana membuatnya tetap, sehingga tidak meregang panjang dan tidak merusak penampilan estetika. Cukup dengan menggunakan kode HTML untuk mendaftar tambahan kecil. Anda perlu mengajukan style.css untuk menambahkan frase setelah background: url (Images / Picture.jpg ') tetap; atau sebaliknya ditambahkan setelah titik koma baris terpisah - position: fixed. Dengan demikian, wallpaper Anda akan diperbaiki. Selama bergulir konten di situs, Anda akan melihat bahwa teks garis bergerak, tapi latar belakang tetap di tempat. Jadi, Anda belajar bagaimana melakukan gambar latar belakang html, dalam beberapa cara.

Bekerja dengan Tabel di HTML

Banyak pengembang web berpengalaman, berhadapan dengan meja dan blok, sering tidak mengerti bagaimana membuat tabel background image html. Seperti semua tim HTML gaya dan CSS, bahasa pemrograman web cukup sederhana. Dan solusi untuk masalah ini adalah untuk menulis sepasang 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 tabel dalam bentuk gambar, perlu untuk menambah tag (table), (tr) atau (td) frase sederhana dengan mengacu pada gambar referensi: background = gambar URL. Untuk kejelasan, kami memberikan beberapa contoh.

Meja dengan gambar bukan latar belakang: contoh HTML

Menggambar tabel 2x3 dan membuatnya gambar latar belakang disimpan di "Images" folder: (background table = "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 ukuran piring yang sama 2x3, tapi menyisipkan gambar dalam kolom nomor 1, 4, 5 dan 6. (tabel) (tr) (latar belakang 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) (latar belakang td = "Images / Picture.jpg") 6 (/ td) (/ tr) (/ tabel). Setelah menonton kita dapat melihat bahwa latar belakang muncul hanya di sel-sel di mana kita terdaftar, dan tidak seluruh tabel.

Situs kompatibilitas cross-browser

Ada hal seperti lintas-browser sumber daya kompatibilitas web. Ini berarti bahwa situs Anda sama-sama baik ditampilkan dalam jenis dan versi browser yang berbeda. Ini harus kode HTML dan CSS gaya untuk menyesuaikan browser yang diperlukan. Selain itu, di era modern ponsel pintar, banyak pengembang web berusaha untuk membuat situs dan disesuaikan untuk versi mobile dan tampilan komputer.