Îmi amintesc că am scotocit prin multe informații și am încercat destul de multe metode până am găsit soluția exactă de care era nevoie în acel moment.

Mai jos voi arăta 3 metode care întind fundalul pe toată lățimea ecranului.

Prima metodă folosește CSS3 pur. Totul funcționează datorită proprietății background-size. În cazul meu, voi întinde imaginea pe toată lățimea ecranului, adică voi atribui proprietăți etichetei body. Îl puteți aplica unui bloc după cum este necesar, de exemplu.

Vom întinde această poză cu o fată drăguță pentru a umple întregul ecran :)

În general, definim un bloc căruia îi atribuim stiluri și adăugăm următorul cod în fișierul de stil pentru acest bloc:

Body( fundal: url(images/bg.jpg) nu se repetă în centru sus fix; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: acoperi)

După cum puteți vedea, în parametrul de fundal adăugăm calea către imagine și setăm poziția imaginii față de ecran. În cazurile noastre, acestea sunt de centru și de sus. Aceasta înseamnă că imaginea va fi în centrul ecranului, iar partea superioară a acesteia va fi apăsată pe partea de sus a ecranului. Acest lucru este astfel încât fața fetei să fie întotdeauna vizibilă. Dacă, de exemplu, aveți un fundal abstract sau o natură, unde puteți vedea cerul, câmpul, orizont, atunci puteți seta valorile centru și centru. În general, dacă sunteți familiarizat cu CSS, atunci cred că veți înțelege. De asemenea, este setat la fix , ceea ce îngheață imaginea.

Metoda este foarte simplă, o folosesc mereu și mi se potrivește 100%. Există un singur lucru. Browserele vechi nu sunt familiarizate cu CSS3, așa că cei care folosesc versiuni antice nu vor vedea rezultatul dorit.

Această metodă folosește CSS obișnuit. În esență, este și simplu. Afișăm imaginea în corpul site-ului atribuind id - bg :

Și scriem stilurile:

#bg (poziție:fixă; indicele z: -1; sus:0; stânga:0; lățime minimă:100%; înălțime minimă:100%; )

Poziționarea este fixă ​​și se întinde pe întregul ecran. Este la fel de simplu :).

jQuery este folosit aici. Prin urmare, mai întâi trebuie să conectați biblioteca dacă nu a fost conectată anterior.

După bibliotecă, conectăm scriptul, care ne va scala fundalul

$(window).load(function() (var theWindow = $(window), $bg = $("#bg"), aspectRatio = $bg.width() / $bg.height(); function resizeBg() ( dacă ((theWindow.width() / theWindow.height())< aspectRatio) { $bg .removeClass() .addClass("bgheight"); } else { $bg .removeClass() .addClass("bgwidth"); } } theWindow.resize(function() { resizeBg(); }).trigger("resize"); });

Și la sfârșit adăugăm stiluri pentru ca totul să funcționeze. Deschideți fișierul de stil și adăugați următorul cod la el:

#bg ( poziție: fix; sus: 0; stânga: 0; z-index: -1; ) .bgwidth ( lățime: 100%; ) .bgheight (înălțime: 100%; )

Puteți vedea din stilurile că am adăugat poziționare. In acest caz este fix. Imaginea va rămâne un fundal fix atunci când derulați, dar dacă schimbați poziționarea la absolut , fundalul poate fi derulat. Apropo, același lucru se poate face cu primele două metode.

Este specificat și parametrul - z-index: -1, astfel încât imaginea să fie în spatele textului. Dacă nu aveți text care ar trebui să fie în față, puteți elimina această opțiune.

Ce metodă să utilizați depinde de dvs. După cum am scris mai sus, prima metodă este mai aproape de mine. Este cel mai simplu și nu mai rău decât alții.

Asta e tot, mulțumesc pentru atenție. 🙂

Tehnologiile web, precum diversele tendințe de design, nu stau pe loc, așa că de fiecare dată apar câteva caracteristici și nuanțe originale pentru site-uri web. Una dintre aceste „direcții” este utilizarea unui fundal (backgorund), care se întinde pe întregul ecran în lățime și înălțime. Ceva de genul cu aproximativ un an sau mai mult în urmă am spus - imaginea a fost plasată în antetul blogului și „tranziție” fără probleme în culoarea principală de fundal a paginii web. Dacă doriți, puteți chiar să adăugați .

Plasarea unei imagini mari scalabile ca fundal este ceva nou si mai complex, solutia la care am gasit-o in acest articol.

Scopul acestei lecții este de a plasa pe site o imagine de fundal care să acopere în mod constant întregul fundal al ferestrei browserului. Ce trebuie făcut exact:

• umpleți întreaga pagină cu o singură imagine fără spații;
• redimensionarea imaginii dacă este necesar (reducerea ferestrei browser);
• menținerea proporțiilor imaginii;
• poziționarea imaginii în centrul paginii;
• lipsa barelor de defilare pe pagină;
• soluție cross-browser potrivită pentru diferite browsere;
• implementare fără tehnologii terțe, cum ar fi flash.

Deci, există mai multe soluții potrivite pentru un fundal de site pe ecran complet.

Pentru a îndeplini această sarcină, putem folosi proprietatea background-size din CSS3. Vom folosi un element html care este mai bun decât body. Să setăm fundalul să fie fix și centrat, apoi folosim capacul valorii în dimensiunea fundalului.

html ( fundal: url(images/bg.jpg) centru central fără repetare fixat; -webkit-background-size: coperta; -moz-background-size: coperta; -o-background-size: coperta; dimensiunea fundal: acoperi)

Soluția este susținută de aproape toate cele populare de pe Internet:

• Firefox 3.6+ (Firefox 4 acceptă versiunea prefixată fără furnizor)
• Opera 10+ (Opera 9.5 acceptă dimensiunea fundalului, dar fără valoarea copertei)
• Chrome Whatever+
• IE 9+
• Safari 3+

Un anume Goltzman a găsit o soluție care permite hack-ului să funcționeze în IE

-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src="myBackground.jpg", sizingMethod="scale")";

filtru: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=".myBackground.jpg", sizingMethod="scale"); -ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src="myBackground.jpg", sizingMethod="scale"");

Hackul CSS numărul 1 O versiune alternativă este prezentată de Doug Neiner. În acest caz, se folosește un element încorporat în pagină

img.bg ( /* Setați reguli pentru a umple fundalul */ înălțime minimă: 100%; lățime minimă: 1024px; /* Setați scalarea proporțională */ lățime: 100%; înălțime: automată; /* Configurați poziționarea */ poziție: fix sus: 0; stânga: 0 ) @media ecran și (max-width: 1024px) ( /* Specific pentru această imagine particulară */ img.bg ( stânga: 50%; margin-left: -512px; / * 50% */ ) )

Funcționează în orice versiune de browsere de înaltă calitate - Safari / Opera / Firefox și Chrome. Ca întotdeauna, IE are propriile sale nuanțe:

• IE 9 - lucrări;
• IE 7/8 - cel mai adesea funcționează corect, dar nu centrează imaginile mai mici decât fereastra browserului;
• IE 6 - poate fi personalizat, dar cine are nevoie oricum de acest browser.

O altă opțiune pentru rezolvarea problemei folosind stiluri CSS este să plasați imaginea încorporată pe pagină cu o poziție fixă ​​în colțul din stânga sus, apoi setați lățimea minimă și înălțimea minimă la 100%, păstrând proporțiile.

#bg ( poziție:fix; sus:-50%; stânga:-50%; lățime:200%; înălțime:200%; ) #bg img (poziția:absolut; sus:0; stânga:0; dreapta:0; jos: 0; lățime minimă: 50%;

Hackul funcționează în:

• Safari / Chrome / Firefox (versiunile timpurii nu au fost testate, dar funcționează bine în cele mai recente)
• IE 8+
• Opera (orice versiune) și împreună cu IE ambele sunt bugate în același mod cu o eroare de poziționare.

Această opțiune este mult mai ușoară (din punct de vedere CSS) dacă știm că raportul de aspect al imaginii (img folosit ca fundal) este mai mare sau mai mic decât raportul de aspect actual al ferestrei browserului. Dacă este mai mică, atunci putem folosi doar lățime = 100% și fereastra va fi umplută în mod egal în lățime și înălțime. Dacă este mai mult, puteți specifica doar înălțimea = 100% pentru a umple întreaga fereastră.

Toate datele sunt accesate prin JavaScript, codurile folosite sunt următoarele:

#bg ( poziție: fix; sus: 0; stânga: 0; ) .bgwidth ( lățime: 100%; ) .bgheight ( înălțime: 100%; )

$(window).load(function() (var theWindow = $(window), $bg = $("#bg"), aspectRatio = $bg.width() / $bg.height(); function resizeBg() ( dacă ((theWindow.width() / theWindow.height())< aspectRatio) { $bg .removeClass() .addClass("bgheight"); } else { $bg .removeClass() .addClass("bgwidth"); } } theWindow.resize(function() { resizeBg(); }).trigger("resize"); });

După părerea mea, centrarea nu se realizează în acest caz (din câte am înțeles), dar se poate face. Cele mai multe browsere desktop sunt acceptate, inclusiv IE7+. În cele din urmă, autorul articolului despre hack-uri a pregătit un set de fișiere exemplu în care toate acestea sunt implementate - îl puteți descărca. Comentariile la articolul original conțin și unele informații și discuții, deși autorul a adăugat cele mai multe detalii importante sub formă de drepturi la postare și le am și traduse și indicate. Desigur, exemplele vă vor ajuta să înțelegeți toate acestea. În general, dacă nu ar fi „gag-urile” constante de la IE7, toate hack-urile menționate ar fi ideale.

P.S. Vrei să cumperi o carte? - nu trebuie să mergeți la magazin pentru că acum o librărie online vă permite să faceți totul online - alegeți, plătiți și aranjați livrarea la domiciliu.

Bun venit pe blogul meu. Să continuăm să învățăm elementele de bază ale html. Acest tutorial va fi atât de simplu și interesant încât sper că veți dori să aflați mai multe despre limbajele de programare. În doar câteva minute vei învăța cum să faci o imagine ca fundal în HTML și să obții rezultate excelente.

Voi vorbi și despre câteva nuanțe care vor face fundalul mai uniform și mai frumos. Ei bine, începem?

Aș dori să încep prin a alege o imagine. Pentru a arăta mai uniform și mai frumos pe pagină și nu trebuie să vă deranjați cu dimensiunile și alinierea. Vă sugerez să căutați imediat texturi fără sudură. Ce este?

Din păcate, este imposibil să întindeți o imagine în html pentru a umple întregul ecran. Fotografia este folosită la dimensiunea reală. Dacă imaginea este mică, atunci va acoperi întreaga zonă, ca în captura de ecran de mai jos. Pentru a întinde imaginea, va trebui să creați un document CSS suplimentar, fără acesta nu va funcționa.

Deși, aveți posibilitatea de a ocoli sistemul. Pentru a face acest lucru, utilizați Photoshop și imagini până la lățimea ecranului (1280x720). Deși în acest caz, la derularea în jos, imaginea va înlocui pe alta.

O opțiune mult mai bună dacă nu doriți să utilizați css este să utilizați texturi fără sudură. Nu au articulații vizibile. Sunt ca tapetul sau plăcile moderne în design. Unul îl înlocuiește pe celălalt și nu sunt vizibile îmbinări.

Dacă sunteți interesat de absența consecințelor legale pentru utilizarea lor, atunci vă recomand să căutați pe site Pixabay.com.

Acum să lucrăm cu codul. Ar trebui să remarc imediat că acum lucrăm cu html, adică schimbăm imaginea nu pentru întregul site, ci doar pentru o anumită pagină pentru care se scrie codul. Dacă sunteți interesat să schimbați întreaga resursă, atunci trebuie să creați codul folosind css, dar mai multe despre asta mai târziu.

Deci, puteți lucra în notepad, eu prefer NotePad++. Este mult mai convenabil să lucrezi în el: codul este completat pentru tine, etichetele sunt evidențiate. Programul este gratuit și cântărește aproximativ 3 MB. Îl recomand cu căldură, mai ales dacă ești începător.

Deci, la etichetă corp trebuie să adăugați un atribut fundalși indicați un link către imaginea de unde va fi făcută fotografia. Așa arată în program.

Puteți doar să deschideți notepad și să copiați acest cod. Între ghilimele, pune un link către poza care îți place.

Imagine de fundal

Aș dori să notez pentru începători, acesta este ideea. Dacă luați o imagine de la Pixabay, atunci trebuie să lipiți linkul nu pe pagina cu imaginea, ci să deschideți imaginea în fila următoare.

Copiați această adresă URL exactă.

Salvați documentul. Nu uitați că, dacă utilizați notepad, trebuie să utilizați . html. Numiți documentul, de exemplu, înapoi.html. În caz contrar, va fi salvat ca document text, iar browserul pur și simplu nu va înțelege ce trebuie să facă.

Gata, pagina este umplută cu o culoare diferită.

Dacă doriți să aflați mai multe despre html, vă sugerez să descărcați curs gratuit de Evgeniy Popov. Din el veți învăța mai multe etichete, capacități lingvistice, veți încerca câteva tehnici noi și veți afla mai multe.

Nu voi spune că cursurile lui Evgeniy Popov sunt extrem de populare. Mulți experți îl certa, iar dacă ați dat peste astfel de afirmații, atunci iată părerea mea. Aceste lecții sunt oferite gratuit și, în ciuda acestui fapt, fac o treabă excelentă în sarcina lor principală - să arate începătorului elementele de bază și să-l actualizeze.

Așa cum fiecare scriitor are propria sa viziune despre cum să scrie, la fel și programatorii au propriul stil. Îți poți petrece întreaga viață învățând cum să creezi site-uri web, dar trebuie să începi de undeva. Din cărți? Nu asta. Da, conțin informații mai de încredere, informații actualizate, dar sunt atât de greu de stăpânit.

Nu sunteți de acord cu mine? Pot oferi o alternativă. Carte de Elizabeth și Erica Freeman Învățarea HTML, XHTML și CSS" Nu este un bestseller foarte plictisitor și a fost lansat nu cu mult timp în urmă, în 2016. Informațiile nu au devenit încă depășite.

Dacă aveți nevoie ca fundalul să fie repetat pe toate paginile site-ului dvs., atunci CSS este o necesitate. Desigur, puteți specifica calea de fiecare dată, ca în capitolul anterior. Dar imaginați-vă dacă în timp trebuie să îl înlocuiți: linkul devine depășit sau pur și simplu doriți să schimbați designul. Mergi la fiecare pagină și schimbi codul? Nu va funcționa așa.

CSS ajută la rezolvarea acestei probleme. Trebuie să creați un fișier cu extensia css și să introduceți următorul cod:

body ( fundal: url (calea fișierului); )

Să vorbim puțin despre codul în sine. Între paranteze, după url puteți introduce un link către o imagine dintr-o sursă terță parte sau pur și simplu numele documentului dacă imaginea se află în același folder cu acest fișier.

Cu css te poți întinde imagine de fundal, asigurați-vă că nu se repetă, adăugați animație GIF și multe altele.

Nu poți scrie totul într-un articol. Și nu mi-am propus o astfel de sarcină. Există o mulțime de subtilități, iar dacă promit că vă vor spune totul într-un singur articol, atunci aceasta nu este altceva decât o înșelăciune.

Vrei să înveți cum să scrii corect site-uri web? Vă recomand să învățați limbaje de programare. Pot recomanda cursul lui Andrey Bernatsky” HTML5 și CSS3 de la Zero la Pro" Îmi place foarte mult acest autor. Nu am urmat acest curs anume în urmă cu câțiva ani, era ceva asemănător, dar mai puțin modern.

Autorul vorbește foarte frumos, totul este ușor și de înțeles. Punctul culminant al acestui curs este că nu doar studiezi, ci creezi un site web specific împreună cu profesorul. Drept urmare, vei primi o carte de vizită, un blog și chiar un magazin online. Foarte misto. Puteți urmări primele trei lecții teoretice despre HTML5 de la acest curs chiar aici și acum.

Apropo, împreună cu acest curs primești 7 bonusuri: elementele de bază ale html și css de Andrei Bernatsky, aspect pentru începători, crearea unei pagini de destinație într-o seară și multe altele. Înainte de a vă angaja la un antrenament serios, încercați cursul gratuit " Exersați HTML5 și CSS3».

Ei bine, asta e tot. Abonați-vă la newsletter pentru a afla mai multe. Foarte curând vă voi spune puțin mai multe despre aspectul adaptiv, creșterea câștigurilor de la orice blog și vă voi oferi o mulțime de sfaturi utile pentru simplificarea muncii dvs. Ne revedem și mult succes în demersurile tale.

Buna ziua. Astăzi vom vedea cum puteți extinde fundalul folosind instrumente CSS (fără intervenția altor instrumente, cum ar fi javascript și altele asemenea).

A devenit posibilă extinderea fundalului CSS folosind mijloace CSS3, în special folosind proprietatea background-size. Trebuie să spun că această proprietate funcționează mult mai bine decât soluțiile similare în Javascript (care au fost folosite înainte de apariția dimensiunii fundalului), deoarece răspunde mai rapid și mai adecvat la modificările dimensiunii browserului, netezește o imagine întinsă mai rapid și, așa cum le plăcea să spună la începutul anilor 2000, x, - „Va funcționa chiar și cu Javascript dezactivat”.

Proprietatea background-size poate avea mai multe valori.
1) aceasta poate fi una dintre directive: acoperă sau conține.

Mărimea fundalului: conține; /* Scadează imaginea menținând proporțiile, astfel încât întreaga imagine să se potrivească în interiorul blocului. */ background-size: coperta; /* Scadează imaginea menținând raportul de aspect, astfel încât lățimea sau înălțimea acesteia să fie egală cu lățimea sau înălțimea blocului. */

2) poate fi un procent (100% sau 94% din lățimea containerului). În acest caz, puteți utiliza fie 1 valoare procentuală, fie 2. Dacă există 2 valori, atunci atât înălțimea, cât și lățimea imaginii vor fi scalate în același timp, iar fiecare valoare este ajustată proporțional cu procentele specificate în parametrii).

Dimensiunea fundalului: 100%; /*Echivalent cu directiva de copertă*/ background-size: 100% 50%; /*Lățimea va fi 100% din lățimea blocului, dar înălțimea va fi de doar 50%, imaginea va fi cel mai probabil deformată*/

3) valoare direct numerică (în piskels, centimetri, em etc.). Pot exista și 2 (sau 1) parametri, ca în cazul precedent.
4) valoare auto. Indică faptul că imaginea nu va fi întinsă, dar va fi utilizată dimensiunea originală. În acest caz, pot exista și 2 sau 1 parametri, adică puteți specifica următoarele:

Dimensiune fundal: 60% automat; /*lățimea imaginii va fi de 60%, iar înălțimea va fi proporțională cu dimensiunea imaginii originale*/

Judecând după site-ul web Can I Use, acesta va funcționa în toate browserele moderne, inclusiv în versiunile IE nu mai mici de 9. Deci, în principiu, nu există niciun motiv de îngrijorare. Vezi tabelul de compatibilitate:

Am găsit acest tutorial pe un canal de YouTube. O caracteristică foarte utilă pentru un web designer, în opinia mea.

Uneori, lățimea imaginii originale nu este suficientă pentru orice idee de design, iar întinderea acesteia de-a lungul lățimii distorsionează obiectele dorite. Pentru a menține aceste obiecte intacte în timp ce întindeți în continuare fundalul imaginii, PhotoShop ne pune la dispoziție anumite instrumente. Și așa, până la urmă avem din imaginea originală:

Ar trebui să arate așa:

Să începem. Deschideți imaginea noastră în PhotoShop și selectați obiectul de care avem nevoie:

Apoi, accesați fila Selecție >> Salvați zona selectată

Și setați un nume arbitrar pentru această selecție:

Astfel, am creat o zonă care va fi protejată ulterior de schimbări. Următorul pas este să mergeți la Editare >> Scala bazată pe conținut:

Și asigurați-vă că indicați obiectul protejat:

Toate. Tot ce rămâne este să modificați lățimea imaginii folosind instrumente standard (fie în panoul de sus prin modificarea procentului de lățime, fie pur și simplu trageți imaginea). Este important înainte de aceasta (sau chiar în stadiul inițial) să schimbați dimensiunea pânzei, astfel încât limitele imaginii să nu depășească zona de vizibilitate a acesteia.