Abilitatea de a întinde imaginea de fundal pe toată lățimea ferestrei browserului folosind CSS a apărut numai odată cu lansarea celei mai recente specificații - CSS3. Din păcate, până acum un număr mare de internauți utilizează browsere timpurii care nu înțeleg specificațiile CSS3. Prin urmare, trebuie să faceți o alegere - fie utilizați o soluție mai puțin convenabilă, dar cross-browser, fie o tehnologie de vârf, dar pentru un public limitat. Să luăm în considerare ambele opțiuni.
Necesar
Cunoștințe de bază în HTML și CSS
Instrucțiuni
Pasul 1
Prima opțiune se bazează pe specificațiile anterioare ale limbajului CSS. Trebuie să creați o structură de cod HTML care să aibă două straturi suprapuse, unul deasupra celuilalt. Straturile (div) pot fi întinse până la lățimea ecranului în vechea specificație a limbii descrierii stilului în cascadă. În partea de jos a straturilor trebuie să plasați imaginea de fundal, iar în partea de sus va plasa tot conținutul paginii. O astfel de structură din corpul documentului ar putea arăta astfel:
Acesta va fi conținutul paginii
Iar descrierea stilurilor pentru această structură ar trebui plasată în partea de titlu. De exemplu, aceasta:
html, corp {
marja: 0px;
înălțime: 100%;
}
#fundal {
poziție: absolută;
lățime: 100%;
înălțime: 100%;
}
#corp {
poziție: absolută;
lățime: 100%;
înălțime: 100%;
indice z: 2;
}
Aici straturile cu ID-uri de fundal (aceasta este imaginea dvs. de fundal) și corpul (acesta este stratul pentru conținutul paginii) sunt setate la poziționare absolută și 100% lățime și înălțime. În plus, stratului de conținut i se atribuie un număr de serie z-index = 2. Determină „adâncimea” straturilor - cu cât este mai mare, cu atât este mai departe de „partea inferioară” acest strat. În cazul nostru, va fi deasupra stratului de fundal, care utilizează indexul z implicit.
Pasul 2
Codul complet ar putea arăta astfel:
html, corp {
marja: 0px;
înălțime: 100%;
}
#fundal {
poziție: absolută;
lățime: 100%;
înălțime: 100%;
}
#corp {
poziție: absolută;
lățime: 100%;
înălțime: 100%;
indice z: 2;
}
Acesta va fi conținutul paginii
Nu uitați să înlocuiți numele fișierului de imagine de fundal fon.png.
Pasul 3
A doua opțiune va utiliza proprietatea de dimensiune de fundal introdusă în CSS3. În același timp, adăugați proprietăți similare definițiilor de stil care au fost utilizate anterior de browserele Mozilla Firefox, Google Chrome și Opera. Blocul de descriere a stilului din această versiune poate arăta astfel:
html {
fundal: url (fon.png) centru central fără repetare fix;
-webkit-background-size: coperta;
-moz-background-size: coperta;
-o-background-size: coperta;
fundal-dimensiune: coperta;
}
Și aici nu uitați să înlocuiți numele fișierului de imagine de fundal fon.png. Și în corpul documentului în sine, nu sunt necesare construcții speciale în această versiune.
