Oferiți site-ului dvs. interesul vizual cu grafica de fundal
Imaginile reprezintă o parte importantă a desenelor atractive ale site-ului. Aceasta include utilizarea imaginilor de fundal. Acestea sunt imaginile și graficele utilizate în spatele zonelor unei pagini, spre deosebire de imaginile prezentate ca parte a paginilor de conținut. Aceste imagini de fundal pot adăuga interes vizual unei pagini și vă pot ajuta să realizați designul vizual pe care îl căutați pe o pagină.
Dacă începeți să lucrați cu imagini de fundal, veți intra, fără îndoială, în scenariul în care doriți să se întindă o imagine pentru a se încadra în pagină.
Acest lucru este valabil mai ales pentru site-urile responsabile care sunt livrate la o gamă largă de dispozitive și dimensiuni ale ecranului .
Această dorință de a întinde o imagine de fundal este o dorință foarte comună pentru designerii de web, deoarece nu toate imaginile se potrivesc în spațiul unui site web. În loc să setați o dimensiune fixă, întinderea imaginii îi permite să se îndoaie pentru a se potrivi paginii, indiferent cât de largă sau îngustă este fereastra browserului .
Cea mai bună modalitate de a întinde o imagine pentru a se încadra în fundalul unei pagini este de a utiliza proprietatea CSS3 , pentru dimensiunea de fundal. Iată un exemplu care folosește o imagine de fundal pentru corpul unei pagini și care stabilește dimensiunea la 100%, astfel încât să se întindă întotdeauna pentru a se potrivi ecranului.
corp {
fundal: url (bgimage.jpg) no-repeat;
dimensiunea fundalului: 100%;
}
Potrivit caniuse.com, această proprietate funcționează în IE 9+, Firefox 4+, Opera 10.5+, Safari 5+, Chrome 10.5+ și pe toate browserele mobile majore. Aceasta vă acoperă pentru toate browserele moderne disponibile astăzi, ceea ce înseamnă că trebuie să utilizați această proprietate fără teama că nu va funcționa pe ecranul cuiva.
Realizarea unui fundal întins în browserele mai vechi
Este foarte puțin probabil să aveți nevoie să sprijiniți orice browsere mai vechi decât IE9, dar să presupunem că sunteți îngrijorat că IE8 nu suportă această proprietate. În acest caz, puteți falsifica un fundal întins. Și puteți utiliza prefixele de browser pentru Firefox 3.6 (-moz-background-size) și Opera 10.0 (-o-background-size).
Cel mai simplu mod de a falsifica o imagine de fundal întinsă este să-l întindeți pe întreaga pagină. Apoi, nu ajungeți cu spațiu suplimentar sau trebuie să vă faceți griji că textul dvs. se potrivește în zona întinsă. Iată cum se face:
id = "bg" />
- Mai întâi, asigurați-vă că toate browserele au o înălțime de 100%, margini 0 și umplutură pe elementele elementului HTML BODY. Plasați următoarele în capul documentului HTML:
- Adăugați imaginea pe care doriți să fie fundalul ca primul element al paginii web și dați-i ID - ul "bg":
- Poziționați imaginea de fundal astfel încât să fie fixată la partea superioară și stângă și să fie 100% lată și 100% în înălțime. Adăugați aceasta în foaia de stil:
img # bg {
poziție: fixă;
top: 0;
stânga: 0;
lățime: 100%;
înălțime: 100%;
} - Adăugați tot conținutul dvs. la pagina din interiorul unui element DIV cu un id de "conținut". Adăugați DIV sub imagine:
Notă: este interesant să te uiți acum la pagina ta. Imaginea ar trebui afișată întinsă, dar conținutul dvs. lipsește complet. De ce? Deoarece imaginea de fundal este de 100% în înălțime, divizarea conținutului este după imaginea din fluxul documentului - majoritatea browserelor nu vor afișa.Tot conținutul dvs. aici - inclusiv anteturi, paragrafe etc.
- Poziționați-vă conținutul astfel încât să fie relativ și să aibă un index z de 1. Aceasta va aduce-o deasupra imaginii de fundal în browserele compatibile cu standardele. Adăugați aceasta în foaia de stil:
#content {
poziție: relativă;
z-index: 1;
}
- Dar nu ai terminat. Internet Explorer 6 nu este compatibil cu standardele și are încă unele probleme. Există multe modalități de ascundere a CSS-ului din fiecare browser, dar IE6, dar cel mai ușor (și cel mai puțin probabil să cauzeze alte probleme) este acela de a utiliza comentarii condiționate. Puneți următoarele după foaia de stil în capul documentului:
- În interiorul comentariului evidențiat, adăugați o altă foaie de stil cu unele stiluri pentru a obține IE 6 pentru a juca frumos:
- Asigurați-vă că ați testat în IE 7 și IE 8, de asemenea. Este posibil să fie necesar să ajustați comentariile pentru a le sprijini. Cu toate acestea, a funcționat când l-am testat.
OK - acest lucru este adesea WAY overkill. Foarte puține site-uri trebuie să suporte IE 7 sau 8, mai puțin IE6!
Ca atare, această abordare este veche și probabil inutilă pentru dvs. L-am lăsat aici mai mult ca un model de curiozitate cu privire la cât de mult lucruri mai dificile au fost înainte de toate browserele noastre au jucat atat de frumos impreuna!
Făcând o imagine de fundal întins peste un spațiu mai mic
Puteți utiliza o tehnică similară pentru a falsifica o imagine de fundal întins pe un DIV sau pe alt element de pe pagina dvs. Web. Acest lucru este puțin mai complicat deoarece trebuie să utilizați poziționarea absolută sau să aveți probleme de spațiere ciudate pentru alte părți ale paginii dvs.
- Plasați imaginea pe pagina pe care vreau să o folosesc ca fundal.
- În foaia de stil, setați o lățime și o înălțime pentru imagine. Rețineți că puteți utiliza procentele pentru lățime sau înălțime, dar mi se pare mai ușor să se adapteze cu valorile lungimii pentru înălțime.
img # bg {
lățime: 20cm;
înălțime: 30cm;
} - Plasați conținutul dvs. într-un div cu "conținut" de id, așa cum am făcut mai sus:
Tot conținutul tău aici
- Stilul conținutului div trebuie să aibă aceeași lățime și înălțime ca imaginea de fundal:
div # content {
lățime: 20cm;
înălțime: 30cm;
} - Apoi poziționați conținutul la aceeași înălțime cu imaginea. Deci, dacă imaginea dvs. este de 30cm, veți avea un stil de vârf: -30cm; Nu uitați să puneți un index z de 1 pe conținut.
#content {
poziție: relativă;
top: -30e;
z-index: 1;
lățime: 20cm;
înălțime: 30cm;
} - Apoi adăugați un index z de -1 pentru utilizatorii IE 6, așa cum ați făcut mai sus:
Din nou, cu dimensiuni de fundal care se bucură de sprijinul larg al browser-ului, acum această abordare este foarte probabil inutilă și prezentată ca produs al unei ere cele mai vechi. Dacă ați vrut să utilizați această abordare, asigurați-vă că ați testa acest lucru în cât mai multe browsere posibil.
Și dacă conținutul dvs. modifică dimensiunea, va trebui să modificați mărimea containerului și a imaginii de fundal, altfel veți ajunge la rezultate ciudate.