Obiectivul pentru noi este că imaginea de fundal de pe site ar trebui să închidă oricând toate ferestrele browserului vizibile. Iată câteva cerințe specifice:
* Imaginea umple întreaga pagină, fără spații
* Imaginea este scalată dacă este necesar
* Raportul aspectului imaginii (aspectul imaginii)
* Imaginea este centrată în centrul paginii
* Nu apare barele de derulare
* Cât mai mult posibil soluția cel mai cross-browser
* Fără diverse fraude cu memorie flash
O metodă excelentă, simplă și progresivă folosind CSS
Putem rezolva problema noastră cu CSS pur, pentru care datorită proprietății de dimensiune de fundal, care a apărut în CSS3. Avem nevoie de un element html (mai bine decât utilizarea corpului, deoarece aceasta nu este întotdeauna înălțimea totală a ferestrei browserului). Vom aloca o imagine de fundal pentru html, o va centra, vom selecta o pozitie fixa si vom ajusta dimensiunea imaginii folosind proprietatea de dimensiune de fundal, pe care o setam la valoarea copertii:
html <
fundal: url (imagini / bg.jpg) centru centru de repetare fixă;
-webkit-background-size: cover;
-moz-background-size: capac;
-o-fundal-size: cover;
dimensiunea fundalului: capac;
>
O astfel de opțiune va funcționa în:
* Safari 3+
* Chrome de orice versiune
* IE 9+
* Opera 10+ (Opera 9.5 suportă dimensiunea fundalului, dar nu suportă capacul)
* Firefox 3.6+ (Firefox 4 acceptă proprietatea de dimensiune de fundal fără prefixul -moz)
Există, de asemenea, o soluție pentru IE, dar aveți grijă - există o opinie conform căreia, după folosire, unele link-uri de pe pagină nu funcționează. Dacă se întâmplă acest lucru - încercați să aplicați acest cod nu în blocurile de caractere html sau corp, ci în bloc div, dar cu o lățime și înălțime de 100%. Iată codul:
filtru: progid: DXImageTransform.Microsoft.AlphaImageLoader (src = '. myBackground.jpg', sizingMethod = 'scară');
-ms-filter: "progid: DXImageTransform.Microsoft.AlphaImageLoader (src = 'myBackground.jpg', sizingMethod = 'scară')";
Numai CSS. Numărul opțiunii 1
În acest exemplu, vom folosi elementul img, care se redimensionează cu ușurință în orice browser. Vom folosi proprietatea min-height pentru a umple fereastra browserului vertical și pentru a seta lățimea la 100% pentru a face același lucru orizontal. De asemenea, setăm min-lățimea astfel încât imaginea să nu devină mai mică decât este de fapt.
img.bg <
/ * Setați regulile pentru a umple fundalul * /
min-înălțime: 100%;
min-lățime: 1024px;
/ * Configurați scalarea proporțională * /
lățime: 100%;
înălțime: auto;
/ * Configurarea poziționării * /
poziție: fixă;
top: 0;
stânga: 0;
>
Funcționează în următoarele browsere:
* În orice versiune de browsere normale: Safari / Chrome / Opera / Firefox
* IE 6: Funcționează - dar există probleme cu capturarea imaginilor
* IE 7/8: În cea mai mare parte lucrări, dar nu se centrează pe rezoluții mici, în timp ce umple complet ecranul
* IE 9: Rularea
Numai CSS. Numărul opțiunii 2
Există o altă modalitate destul de simplă de a ne rezolva problema: utilizați imaginea pe pagina noastră, fixați-o într-o poziție fixă în colțul din stânga sus și setați min-height și min-width 100%, menținând raportul de aspect.
#bg <
poziție: fixă;
top: 0;
stânga: 0;
/ * Păstrați raportul aspet * /
min-lățime: 100%;
min-înălțime: 100%;
>
Cu toate acestea, acest lucru nu centrează imaginea, care este importantă pentru noi. Putem rezolva această problemă prin includerea imaginii în bloc div. Acest bloc va avea de două ori dimensiunea ecranului browserului. Când inserăm imaginea în acest bloc, acesta va fi situat strict în centrul ferestrei browserului, menținând în același timp raportul de aspect.
#bg <
poziție: fixă;
top: -50%;
stânga: -50%;
lățime: 200%;
înălțime: 200%;
>
#bg img <
poziția: absolută;
top: 0;
stânga: 0;
dreapta: 0;
fund: 0;
marja: auto;
min-lățime: 50%;
min-înălțime: 50%;
>
Această opțiune funcționează în:
* Safari / Chrome / Firefox (probabil nu toate versiunile mai vechi)
* IE 8+
* Opera (toate versiunile) și IE atât înțeleg greșit acest cod (poziționare greșită, nu este clar de ce)
Opțiune cu jQuery