Fundalul paginii HTML. Imagine de fundal

Bine ati 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 cât mai neted și frumos. Ei bine, începem?

Selectarea unei imagini

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 .

HTML

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ă codificați 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.

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 că, dacă folosești notepad, trebuie să folosești extensia .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, tot așa 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 fiabile, 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.

CSS

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? Acest lucru nu va funcționa.

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

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.

Pentru cei care vor să știe mai bine

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 asemenea 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 tare. 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.

Vlad Merjevici

Datorită particularităților paginilor web, imaginile de fundal joacă un rol semnificativ în aspectul documentelor site-ului. În același timp, aceștia sunt implicați activ într-o varietate de lucruri, de exemplu, automatizarea procesului de atașare a imaginilor la text, crearea de tranziții în gradient și, desigur, adăugarea unui fundal sub conținut. Mai jos sunt câteva aspecte ale utilizării imaginilor de fundal.

Fundal pe o pagină web

Setarea unei imagini de fundal pentru o pagină web are loc în mod tradițional prin atributul de fundal al etichetei. . Acest model se repetă pe orizontală și pe verticală, umplând astfel întreaga fereastră a browserului. Este clar că nu există opțiuni speciale pentru creativitate aici, așa că hai să ne întoarcem la stiluri și să vedem ce se poate face folosind CSS.

CSS are cinci atribute care controlează imaginea de fundal: adăugarea, poziția și repetarea acesteia. Cu toate acestea, toți acești parametri sunt înlocuiți cu o proprietate universală, fundal, pe care o vom folosi în viitor.

Adăugarea unui tapet

Adăugarea unei imagini are loc prin setarea adresei imaginii folosind cuvântul cheie url. Pentru a controla repetarea unei imagini, se folosesc argumentele no-repeat, repeat-x (repetare orizontală) și repeat-y (repetare verticală). Datorită acestui lucru, puteți obține pagina web prezentată în Fig. 1.

Pentru a seta o imagine pe o pagină web, trebuie să adăugați o proprietate de stil de fundal la selectorul BODY, așa cum se arată în Exemplul 1.

Exemplul 1: imagine de fundal

În acest exemplu, graficul target.gif este definit ca fundalul paginii web fără a repeta imaginea. Pentru a preveni ca imaginea să se potrivească strâns la marginile browserului, aceasta este deplasată cu 30 de pixeli la dreapta și cu 20 de pixeli în jos față de poziția inițială.

Repetarea unui model

Datorită faptului că puteți seta modelul de fundal să se repete orizontal sau vertical, sunt disponibile mai multe opțiuni pentru proiectarea paginilor web. De exemplu, pentru a crea o dungă verticală de-a lungul marginii din stânga (Fig. 2), veți avea nevoie de imaginea prezentată în Fig. 3.

Designul trebuie să fie astfel încât să se potrivească pe verticală, fără cusături vizibile și, de asemenea, să formeze un singur întreg cu culoarea de fundal specificată a paginii web. Exemplul 2 arată cum să creați o astfel de imagine de fundal, folosind din nou proprietatea de fundal și valoarea sa de repetare.

Exemplul 2. Repetarea fundalului pe verticală

În mod similar, puteți repeta fundalul pe orizontală, de exemplu, creând un gradient și setându-l ca imagine de fundal (Fig. 4).

Pentru a obține pagina web prezentată în Fig. 4, mai întâi va trebui să faceți o imagine cu o tranziție în gradient. Lățimea este suficientă pentru a specifica 20-40 pixeli, iar înălțimea imaginii depinde de scopul documentului și de înălțimea așteptată a conținutului paginii web. De asemenea, nu uitați că un desen mare va crește dimensiunea fișierului grafic. Și acest lucru va afecta negativ viteza de încărcare și, în cele din urmă, va duce la afișarea mai lentă în fundal. Pentru acest caz, o imagine de 30x200 pixeli era destul de potrivită (Fig. 5).

Exemplul 3 arată codul HTML pentru a crea un fundal gradient.

Exemplul 3: Se repetă pe fundal orizontal

Un design gradient se potrivește bine cu un bloc de culoare solidă, așa că în acest exemplu adăugăm un strat pentru a afișa conținutul paginii web.

Adăugarea unei imagini la text

Folosind o imagine de fundal, puteți automatiza procesul de adăugare a elementelor grafice unui anumit text, cum ar fi titluri. Pentru a face acest lucru, utilizați proprietatea universală de fundal, care este aplicată selectorului dorit. Valoarea este calea către imagine și, pentru ca aceasta să nu se repete, argumentul fără repetare (exemplul 4).

Exemplul 4: Adăugarea unei imagini

Titlu

Textul principal

După cum se arată în acest exemplu, desenul poate fi mutat orizontal și vertical din poziția inițială, implicit acesta este colțul din stânga sus al elementului bloc. Deplasarea fundalului vă permite să poziționați imaginea în raport cu textul în modul dorit. Pentru a preveni suprapunerea textului cu imaginea, trebuie să adăugați proprietatea padding-left, datorită căreia textul este deplasat la dreapta cu distanța specificată. Este individual în fiecare caz și este de obicei egal cu lățimea imaginii plus spațiul dorit dintre imagine și text.

În această postare vă voi spune ca de obicei setați fundalul site-ului folosind HTML cod.

De asemenea, vă voi arăta un serviciu străin excelent pentru selectarea fundalurilor fără întreruperi.
În zilele noastre, setările site-ului sunt făcute mai ușoare și mai convenabile prin console CMS precum WordPress.
Poate fi necesar să schimbați șabloanele de site-uri web de vânzare, acest articol vă va ajuta în acest sens.

Dacă nu știi ce este HTML, atunci aceasta poate fi numită în general limba site-urilor sau un set de reguli prin care site-urile sunt generate.

De exemplu, vedeți o imagine pe un site web, dar în codul HTML al paginii poate arăta astfel:

Setați o culoare solidă pentru fundalul paginii.

Pentru a instala fundal de culoare solidă, trebuie să etichetați adauga atribut bgcolor.

< html >
< head >
< title >Titlul paginii.

< body bgcolor = "#ffcc00" >

Puteți lipi acest cod într-un fișier text și îl puteți salva cu extensia .html. Apoi deschideți-l cu orice browser și vedeți rezultatul.

După cum probabil ați ghicit, culoarea de fundal apare datorită codului de culoare din atribut bgcolor= „valoare”, care poate fi găsit accesând acest link.

Setarea unei imagini pe fundalul unei pagini HTML.

Pentru a setați imaginea pe fundal, puteți folosi atributul fundalîn etichetă .

< html >
< head >
< title >Titlul paginii.

< body background = "http://сайт/images/mlmsecret.jpg" >Buna ziua. Aceasta este prima mea pagină.

Este posibil să observați că atributul fundal este egală cu calea fișierului care este folosit ca fundal.

Pentru a schimba rapid fundalul sau orice imagine de pe pagină, trebuie doar să specificați noua cale către fișier folosind un editor de text.

Pentru a afla calea anterioară, trebuie să mergeți la pagina cu imaginea, faceți clic dreapta pe imagine și faceți clic pe „Copiați adresa URL a imaginii”. astfel vei vedea numele imaginii/fondului. Apoi puteți pur și simplu să înlocuiți vechea imagine cu a dvs., folosind același nume de fișier.

Acestea au fost cele mai simple elemente de bază pentru configurare fundal în html, acum vine partea interesantă. 🙂

Mulți designeri de layout începători, care doar aprofundează în esența creării de site-uri web, se întreabă adesea cum să facă din fundal o imagine în html. Și chiar dacă unii oameni își pot da seama de această sarcină, problemele apar la întinderea imaginii pe întreaga lățime a monitorului. În același timp, aș dori ca site-ul să fie afișat în mod egal pe toate browserele, deci trebuie îndeplinită cerința de cross-browser. Puteți seta fundalul în două moduri: folosind stilul CSS. Fiecare alege cea mai optimă opțiune pentru sine. Desigur, stilul CSS este mult mai convenabil, deoarece codul său este stocat într-un fișier separat și nu ocupă coloane suplimentare în etichetele principale ale site-ului, dar mai întâi, să ne uităm la o metodă simplă de setare a unei imagini la fundalul site-ului.

Etichete HTML de bază pentru crearea unui fundal

Deci, să trecem la întrebarea, fundal în html pe tot ecranul. Pentru ca site-ul să arate frumos, trebuie să înțelegeți un detaliu destul de important: este suficient să faceți un fundal gradient sau să îl pictați cu o culoare solidă, dar dacă trebuie să inserați o imagine în fundal, aceasta nu se va întinde. pe toată lățimea monitorului. Inițial, trebuie să selectați o imagine sau să faceți singur un design cu extensia în care va fi afișată pagina site-ului dvs. Numai după ce imaginea de fundal este gata, transferați-o într-un folder numit „Imagini”. În el vom stoca toate imaginile, animațiile și alte fișiere grafice pe care le folosim. Acest folder ar trebui să fie în directorul rădăcină al tuturor fișierelor dvs. html. Acum puteți trece la cod. Există mai multe opțiuni pentru scrierea codului care va schimba fundalul într-o imagine.

1. Scrieți atributul etichetei.
2. Prin stilul CSS în cod HTML.
3. Scrieți stilul CSS într-un fișier separat.

Cum să faci din fundal o imagine în HTML depinde de tine, dar aș dori să spun câteva cuvinte despre cum ar fi cel mai optim. Prima metodă, care utilizează scrierea printr-un atribut de etichetă, a fost demult depășită. A doua opțiune este folosită în cazuri foarte rare, doar pentru că se obține o mulțime din același cod. Și a treia opțiune este cea mai comună și eficientă. Iată exemple HTML de etichete:

1. Prima modalitate de a scrie este prin atributul tag (corp) din fișierul index.htm. Este scris sub următoarea formă: (body background= "Folder_name/Image_name.extension")(/body). Adică, dacă avem o imagine cu numele „Imagine” și extensia JPG și am numit folderul „Imagini”, atunci intrarea codului HTML va arăta astfel: (body background="Imagini/Imagine.jpg") … (/corp) .
2. A doua metodă de înregistrare afectează stilul CSS, dar este scrisă în același fișier numit index.htm. (body style="background: url("../Images/Picture.jpg")").
3. Și a treia metodă de înregistrare se face în două fișiere. Într-un document numit index.htm, este scrisă următoarea linie: (head)(link rel="stylesheet" type="text/css" href="Path_to_CSS_file")(/head). Și în fișierul de stil numit style.css scriem deja: body (background: url(Images/Picture.jpg")).

Am discutat despre cum să faci o imagine de fundal în HTML. Acum trebuie să înțelegeți cum să întindeți imaginea pe lățimea întregului ecran.

Modalități de a întinde o imagine de fundal la lățimea ferestrei

Să ne imaginăm ecranul sub formă de procente. Se pare că întreaga lățime și lungime a ecranului va fi 100% x 100%. Trebuie să întindem imaginea la această lățime. Să adăugăm o linie la intrarea de imagine din fișierul style.css, care va întinde imaginea pe toată lățimea și lungimea monitorului. Cum este scris asta în stil CSS? E simplu!

fundal: url(Imagini/Imagine.jpg")

dimensiunea fundalului: 100%; /* această intrare este potrivită pentru majoritatea browserelor moderne */

Așa că ne-am dat seama cum să facem o imagine ca fundal în HTML pentru a umple întregul ecran. Există, de asemenea, o modalitate de a scrie în fișierul index.htm. Deși această metodă este depășită, este necesar ca începătorii să o cunoască și să o înțeleagă. În eticheta (head)(style) div ( background-size: cover; ) (/style) (/head), această intrare înseamnă că alocăm un bloc special pentru fundal, care va fi poziționat pe toată lățimea fereastră. Am analizat 2 moduri de a face din fundalul unui site web o imagine HTML, astfel încât imaginea să se întindă pe toată lățimea ecranului în orice browser modern.

Cum să faci un fundal fix

Dacă decideți să utilizați o imagine ca fundal al unei viitoare resurse web, atunci trebuie doar să aflați cum să o faceți nemișcată, astfel încât să nu se întindă în lungime și să nu strice aspectul estetic. Este destul de ușor să scrii acest mic adaos cu ajutor. Trebuie să adăugați o frază în fișierul style.css după fundal: url(Imagini/Imagine.jpg") fix; sau adăugați o linie separată după punct și virgulă - poziție: fix. Astfel, imaginea de fundal va rămâne nemișcată. În timpul Derulând prin conținutul de pe site, vei vedea că liniile de text se mișcă, dar fundalul rămâne pe loc. Așa că ai învățat cum să faci din fundal o imagine în html, în mai multe moduri.

Lucrul cu un tabel în HTML

Mulți dezvoltatori web fără experiență, când se confruntă cu tabele și blocuri, adesea nu înțeleg cum să facă o imagine ca fundal de tabel în HTML. Ca toate stilurile CSS, acest limbaj de programare web este destul de simplu. Și soluția la o astfel de problemă ar fi să scrieți câteva linii de cod. Ar trebui să știți deja că scrierea rândurilor și coloanelor din tabel este denumită etichete (tr) și, respectiv, (td). Pentru a face fundalul tabelului sub forma unei imagini, trebuie să adăugați o expresie simplă la eticheta (tabel), (tr) sau (td) care indică un link către imagine: fundal = URL-ul imaginii. Pentru claritate, să dăm câteva exemple.

Tabele cu o imagine în loc de fundal: exemple HTML

Să desenăm un tabel 2x3 și să facem din fundal o imagine salvată în folderul „Imagini”: (fondul tabelului = „Imagini/Imagine.jpg”) (tr) (td)1(/td) (td)2(/td) (td) 3)(/td)(/tr) (tr)(td)4(/td) (td)5(/td) (td)6(/td)(/tr) (/tabel). În acest fel, masa noastră va fi pictată pe fundalul imaginii.

Acum să desenăm aceeași placă cu dimensiunile 2x3, dar introduceți o imagine în coloanele numerotate 1, 4, 5 și 6. (tabel)(tr)(td background = „Imagini/Imagine.jpg”)1(/td) (td) )2 (/td) (td)3(/td)(/tr) (tr)(td fundal = „Imagini/Imagine.jpg”)4(/td) (Td fundal = „Imagini/Imagine.jpg”) 5( /td) (td fundal = „Imagini/Imagine.jpg”)6(/td) (/tr) (/tabel). După vizualizare, vedem că fundalul apare doar în acele celule în care ne-am înregistrat, și nu în întregul tabel.

Compatibilitate cross-browser a site-ului

Există, de asemenea, compatibilitatea între browsere a unei resurse web. Aceasta înseamnă că paginile site-ului vor fi afișate la fel de corect în diferite tipuri și versiuni de browsere. În acest caz, trebuie să ajustați codul HTML și stilul CSS la browserele necesare. În plus, în epoca modernă a dezvoltării smartphone-urilor, mulți dezvoltatori web încearcă să creeze site-uri adaptate atât pentru versiuni mobile, cât și pentru vizualizări de computer.

Browserele moderne vă permit să adăugați un număr arbitrar de imagini de fundal unui element, listând parametrii fiecărui fundal separați prin virgule. Este suficient să utilizați proprietatea universală de fundal și să specificați mai întâi un fundal pentru ea și al doilea separat prin virgulă.

Cum să întindeți fundalul pe toată lățimea ferestrei?

Pentru a scala fundalul, utilizați proprietatea background-size; setați valoarea acesteia la 100%, apoi fundalul va ocupa întreaga lățime a ferestrei browserului. Pentru versiunile mai vechi de browsere, ar trebui să utilizați proprietăți specifice cu prefixe, așa cum se arată în exemplul 1.

Cum să adăugați o imagine de fundal la o pagină web?

Pentru a adăuga o imagine de fundal la o pagină web, setați calea către imagine în valoarea URL a proprietății de stil de fundal, care la rândul său este adăugată la selectorul de corp.

Este posibil să faci un fundal animat?

Animația este o tehnică destul de puternică care poate aduce la viață orice document, așa că nu este surprinzător faptul că tehnologia Flash, care adaugă desene animate paginilor web și, de asemenea, cele interactive, a devenit extrem de populară. Formatul grafic GIF acceptă, de asemenea, animație simplă prin schimbarea secvențială a cadrelor. Deci, folosind o imagine în acest format, este posibil să animați nu numai imagini individuale, ci și fundalul unei pagini web sau un anumit element.

În primul rând, va trebui să creați o imagine animată în format GIF, pentru care puteți utiliza Adobe Photoshop sau un alt program adecvat în acest scop. Există, de asemenea, biblioteci de fișiere animate gata făcute care pot fi folosite ca imagine de fundal. Apoi, imaginea este adăugată ca fundal folosind proprietatea stilului de fundal, așa cum se arată în Exemplul 1.

Cum se pune o imagine de fundal în colțul din dreapta jos al paginii?

Pentru a controla poziția imaginii de fundal pe pagină, este utilizată proprietatea stilului de poziție de fundal; aceasta setează simultan coordonatele orizontale și verticale ale imaginii. Pentru a anula repetarea unei imagini de fundal, utilizați proprietatea background-position cu valoarea no-repeat .

Cum pot preveni repetarea fundalului?

În mod implicit, imaginea de fundal se repetă orizontal și vertical, formând un mozaic pe întreg câmpul paginii web. Cu toate acestea, acest comportament de fundal nu este întotdeauna necesar, mai ales atunci când plasați o singură imagine, așa că adăugarea unei valori fără repetare la proprietatea stilului de fundal va ajuta.

Cum pot face ca fundalul să se repete doar pe verticală?

Repetarea fundalului este de obicei necesară pentru a crea linii decorative sau degrade care sunt legate de înălțimea unui element sau a unei ferestre de pagină web. În astfel de cazuri, repetarea fundalului pe verticală oferă o imagine consistentă, indiferent de dimensiunea elementelor. Numai la început ar trebui să vă asigurați că imaginea de fundal se repetă fără cusături.