Întindeți de fundal pentru ecran complet folosind css, jquery, php
Scopul nostru este de a realiza site-ul de fundal (background), care va acoperi întreaga suprafață de lucru a ferestrei browser-ului. Vom face acest lucru printr-o varietate de tehnici folosind CSS3, CSS pur, jQuery, PHP.
Să definim ceea ce dorim sa obtinem:
Completa umple imaginea ferestrei, fără spații.
Întinzându-se o imagine de fundal, după cum este necesar.
Potrivire proporțiile imaginii.
Imaginea ar trebui să fie în centru.
Ar trebui să fie la fel de cross-browser.
Și fără nici o ține de fleacuri cu flash.
metoda CSS3
Ne putem întinde pe fundalul css pur, datorită proprietății de fundal dimensiunea este prezentă în CSS3. Vom folosi elementul HTML, este mai bine decât corpul. așa cum va fi întotdeauna egală cu înălțimea ferestrei browser-ului. Vom face un fond fix și pune-l în centrul ferestrei, atunci vom întinde pe tot ecranul prin utilizarea proprietății de fundal dimensiune.
Opera 10+ (Opera 9.5 suportă de fundal dimensiuni, dar nu acceptă cuvintele cheie)
fundal Stretch pe CSS pur
Asigurați-vă de fundal pe ecran complet folosind codul CSS pur, aveți două metode. Nu excepția că există și altele.
Aici vom folosi elementul img. care va fi extins la întreaga fereastră, și va arata la fel în toate browserele. Am stabilit min-înălțime. care va umple fereastra browser-ului vertical. De asemenea, setați lățimea până la 100%, ceea ce va umple ecranul orizontal. Am stabilit, de asemenea, imaginea-min lățime, astfel încât de fundal nu va fi niciodată mai mică decât ne-am stabili.
În special o parte delicată a codului este de a utiliza interogarea mass-media, pentru a preveni bug, atunci când fereastra browser-ului este mai mică decât fundalul imaginii. De asemenea, utilizarea combinată a crestat procentajului din stânga. Acest lucru vă permite să păstrați fundal în centru, indiferent de ce.
Toate versiunile de browsere populare: Safari / Chrome / Opera / Firefox
IE 6: Cel puțin fundalul rămâne fixat
IE 7/8: O mulțime de muncă nu este centrată pe o scară mică, dar ea umple ecranul, în cel mai bun mod
Un alt mod simplu de a pune în aplicare acest lucru, se introduce o imagine de pe pagina. Acesta va avea o poziție fixă și va fi plasat în colțul din stânga sus. Am atribui un min-lățime și înălțime min până la 100%. De asemenea, trebuie să se pregătească în avans imaginea, în ceea ce privește proporționalitatea părților.
Cu toate că acest cod nu este centrat imagine de fundal. Deci, acum avem corect ... Putem capta imaginea cu ajutorul a lua-o la div.
Safari / Chrome / Firefox (nu a fost testat pe versiunile mai vechi)
Opera (toate versiunile), și IE afișează aceeași (poziționare rău, eu nu înțeleg de ce)
fundal Stretch cu jQuery
Această idee a apărut un pic mai devreme (ca metodă alternativă CSS). Dacă știm proporțiile și dimensiunea imaginii, vom fi capabili sa se intinda fundal pe CSS. În cazul în care imaginea este mai mică decât fereastra browser-ului, vom schimba lățimea până la 100% din imagine. Dacă există, putem stabili doar înălțimea de 100% și știu că imaginea este completa atât lățimea și înălțimea.
Nu este realizat de centrare, dar se poate face cu ușurință.
Și toate celelalte browsere populare
Întinde fundalul folosind PHP
De fapt, PHP, putem folosi pentru un singur scop: de procesare a imaginii folosind biblioteca GD. Anterior, am vorbit despre modul de a face un script de previzualizare imagini. În acest caz, acesta poate fi folosit pentru a modifica dimensiunea imaginii pe zbor. Dar există o problemă, imaginea va fi generat pentru fiecare acces la site-ul. Pentru un proiect mare, este prea mari consumatoare de resurse. Ar fi mai bine pentru a face imaginea piesei finite, respectiv, cel mai popular Rezoluție ecran (1024 x 1280, 1280 x 800, ...), folosind Photoshop nu este dificil. Dacă rezoluția ecranului este diferit, acestea sunt cazuri izolate, vom conecta automat redimensiona script. Acesta este conectat după cum urmează: