Fundal din fotografie în html. Imagine de fundal

Mulți designeri de layout începători care tocmai intră în esența creării site-urilor web se întreabă adesea cum să creeze o imagine de fundal în html. Și dacă unii își pot da seama de această sarcină, atunci apar aceleași probleme în timpul întinderii imaginii pe toată lățimea monitorului. În același timp, aș dori ca site-ul să fie afișat la fel pe toate browserele, deci trebuie îndeplinită cerința de cross-browser. Puteți seta fundalul în două moduri: folosind și stilul CSS. Fiecare alege cea mai bună 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ă luăm în considerare o metodă simplă de a seta o imagine pe fundalul Site-ul.

Etichete HTML de bază pentru crearea unui fundal

Deci, să trecem la întrebarea, fundalul în html este ecran complet. Pentru ca site-ul să arate frumos, trebuie să înțelegeți un detaliu destul de important: trebuie doar 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 o astfel de extensie, în care veți afișa pagina site-ului. Abia după ce imaginea de fundal este gata, mutați-o într-un folder numit „Imagini”. În el vom stoca toate imaginile, animațiile și alte fișiere grafice folosite. Acest folder ar trebui să fie în directorul rădăcină cu toate fișierele dvs. html. Acum poți merge la cod. Există mai multe opțiuni pentru scrierea unui cod cu care fundalul se va schimba într-o imagine.

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

Depinde de tine cum să faci din fundal o imagine în HTML, dar aș dori să spun câteva cuvinte despre cum ar fi cea mai optimă. Prima metodă prin scrierea prin atributul tag a fost demult depreciată. 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 etichetei (body) 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 înregistrarea codului HTML va arăta astfel: (fondul corpului = „Imagini / Imagine.jpg". ") ... (/ corp) ...
2. A doua metodă de scriere afectează stilul CSS, dar este scrisă în același fișier numit index.htm. (style body = „background: url (" ../ Images / Picture.jpg ")").
3. Iar a treia modalitate 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 = "CSS_file_path") (/ head). Și în fișierul de stil denumit style.css scriem deja: body (background: url (Imagini / Picture.jpg ")).

Ne-am dat seama cum să facem un fundal o imagine în HTML. Acum trebuie să vă dați seama cum să întindeți imaginea la lățimea întregului ecran.

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

Să ne imaginăm ecranul ca procent. Se pare că întreaga lățime și lungime a ecranului va fi 100% x 100%. Trebuie să întindem imaginea la această lățime. Adăugați 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? Este atat de simplu!

fundal: url (Imagini / Imagine.jpg ")

dimensiunea fundalului: 100%; / * aceasta va funcționa pentru majoritatea browserelor moderne * /

Așa că ne-am dat seama cum să facem o imagine de fundal în html pe ecran complet. 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ă selectă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 oricare dintre browserele moderne.

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ă învățaț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ă prescrii acest mic adaos cu ajutorul. 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 deveni fixă. prin conținutul de pe site, vei vedea că liniile de text se mișcă, dar fundalul rămâne pe loc. Așa 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 pe fundalul unui tabel în html. Ca orice și stilul CSS, acest limbaj de programare web este destul de simplu. Și soluția la această problemă ar fi să scrieți câteva linii de cod. Ar trebui să știți deja că ortografia rândurilor și coloanelor din tabel se notează ca etichete (tr) și, respectiv, (td). Pentru a face fundalul tabelului sub forma unei imagini, trebuie să adăugați o expresie simplă la etichetă (tabel), (tr) sau (td) cu un link către imagine: fundal = URL-ul imaginii. Pentru claritate, iată câteva exemple.

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

Să desenăm un tabel 2x3 și să facem din el imaginea de fundal 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). Acest lucru va umple tabelul nostru cu fundalul imaginii.

Acum să desenăm aceeași placă de 2x3, dar introduceți imaginea în coloanele numerotate 1, 4, 5 și 6. (tabel) (tr) (td fundal = „Imagini / Imagine.jpg”) 1 (/ td) (td) 2 (/ td) (td) 3 (/ td) (/ tr) (tr) (td fundal = „Imagini / Picture.jpg”) 4 (/ td) (td fundal = „Imagini / Imagine.jpg”) 5 ( / td) (td background = „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.

Site cross-browser

Există, de asemenea, o resursă web între browsere. Aceasta înseamnă că paginile site-ului vor fi afișate la fel de corect în diferite tipuri și versiuni de browsere. În același timp, trebuie să personalizați codul HTML și stilul CSS pentru browserele necesare. În plus, în epoca modernă a dezvoltării smartphone-urilor, mulți dezvoltatori web încearcă să creeze site-uri care sunt adaptate atât pentru versiunile mobile, cât și pentru vizualizarea computerului.

Pentru a crea un site web, o întrebare importantă este cum să faci fundalul în html. Această procedură implică utilizarea anumitor etichete - cuvinte de cod și litere. Datorită lor, puteți pune un fundal diferit, îl puteți face monocromatic - îl umpleți sau puteți pune orice imagine în locul fundalului. Astfel de acțiuni vor fi foarte utile pentru toți designerii de layout și pentru cei care au decis să-și „imbrace” site-ul în mod independent.

Realizarea fundalului

Înainte de a face fundalul site-ului html, trebuie să deschideți codul html al paginii într-un editor de text. Rețineți că etichetele sunt plasate vertical pe pagină. Apoi, între etichete … , trebuie să puneți o etichetă- aceste etichete sunt necesare pentru a clarifica stilul elementelor acestei pagini web. În locul celor trei puncte, trebuie să scrieți - corp (fond :). Aceasta este o opțiune datorită căreia puteți seta diferite stiluri pentru fundalul paginii. Puteți efectua operația de setare a culorii în două moduri. Primul:

Corp (fundal: # 000000) - acum fundalul paginii ar trebui să fie negru.

Această metodă este potrivită pentru a seta atât culoarea, cât și imaginea ca fundal. După două puncte puteți pune fie un cod de culoare, fie un link către o imagine. Și puteți folosi o metodă care înseamnă doar setarea culorii - o anumită umplere pentru pagină. După două puncte, trebuie să scrieți așa-numitul parametru - culoare. Și după el, pune codul culorii în sine. Aceasta este o modalitate bună de a-l folosi ca șablon. Înregistrați-l și salvați, iar când este necesar - setați culoarea, puneți-o pe pagină.

Puteți pune, în loc de un fundal simplu, o poză. Dacă trebuie să știți: în html, cum să faceți o imagine un fundal, atunci operațiunile trebuie făcute similar. Înregistrați etichete, puneți corpul (fond: link către imagine). Trebuie amintit că imaginea în sine poate fi oriunde. Și pe site-ul de pe Internet, dar cel mai bine este să creați un folder la rădăcina documentului. În folderul în care vor fi salvate toate informațiile despre pagina site-ului, trebuie să creați altul - pentru imagini. Operația va arăta astfel:

Acum poza pe care ați ales-o va fi fundalul întregii pagini a site-ului. Sperăm că v-ați dat seama cum să faceți un fundal în html. Încearcă-l și cu siguranță vei reuși!

Vlad Merjevici

Datorită particularităților paginilor web, imaginile de fundal capătă un rol semnificativ în aspectul documentelor site-ului. În același timp, aceștia sunt implicați activ într-o varietate de activități, 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. Unele aspecte ale utilizării imaginilor de fundal sunt discutate mai jos.

Fundal pe pagina web

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

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

Adăugarea unei imagini de fundal

O imagine este adăugată prin setarea adresei imaginii folosind cuvântul cheie url. Pentru a controla repetarea imaginii, se folosesc argumentele no-repeat (fără repetiție), repeat-x (repetare orizontală) și repetiție-y (repetare verticală). Acest lucru vă permite să obțineți pagina web prezentată în Fig. unu.

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

Exemplul 1. Tapet

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

Repetarea modelului

Datorită faptului că puteți seta tapetul 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 (Figura 2), aveți nevoie de imaginea prezentată în Figura. 3.

Desenul trebuie să fie astfel încât să se potrivească vertical, fără cusături vizibile și, de asemenea, să alcătuiască 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. Repetând fundalul 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. Nu uitați că un desen mare va duce la o creștere a dimensiunii fișierului grafic. Și acest lucru va afecta negativ viteza de încărcare și, în cele din urmă, va duce la o încetinire a afișajului fundalului. Pentru acest caz, o imagine cu o dimensiune de 30x200 pixeli era destul de potrivită (Fig. 5).

Exemplul 3 arată codul HTML pentru crearea unui fundal gradient.

Exemplul 3. Repetarea fundalului pe orizontală

O grafică în gradient funcționează bine cu un bloc de culoare solidă, așa că acest exemplu adaugă un strat pentru a afișa conținutul paginii web.

Adăugarea unei imagini la text

Cu o imagine de fundal, puteți automatiza procesul de adăugare a imaginilor unui anumit text, cum ar fi titluri. Pentru a face acest lucru, utilizați proprietatea generică de fundal, care este aplicată selectorului dorit. Ca valoare, specificați 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, imaginea poate fi deplasată orizontal și vertical din poziția inițială, implicit acesta este colțul din stânga sus al elementului bloc. Schimbarea fundalului vă permite să setați imaginea în raport cu textul după cum doriți. Pentru a preveni suprapunerea textului cu imaginea, asigurați-vă că 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 distanța dorită dintre imagine și text.

Setarea culorii de fundal și/sau a imaginii pentru o pagină sau elementul ei individual este destul de simplă. Principalul lucru este să știți unde și cum se poate face acest lucru, precum și să aveți un cod de culoare și/sau o imagine de fundal. Este posibil să înveți multe din acest articol, dar l-am creat special pentru începători. Prin urmare, totul va fi cât mai scurt și detaliat în același timp. Principalul lucru este că veți obține nu numai o idee generală și exemple gata făcute, ci și o înțelegere a modului de a crea un fundal în HTML.

Pentru a seta fundalul în HTML, utilizați un DOCTYPE intermediar

Și voi începe cu faptul că în HTML5 nu ai cum sa intrebi. S-a decis mutarea acestei funcții în CSS. Prin urmare, dacă intenționați să utilizați cele menționate mai jos și doriți să obțineți un cod valid (corect), trebuie să vă opriți la tipul de document tranzitoriu. Pentru a face acest lucru, pagina dvs. web trebuie să înceapă cu următoarea linie:

Tranzitorie// RO "" http://www.w3.org/TR/html4/loose.dtd ">

Acum că ne-am dat seama, să trecem la înțelegerea modului în care este creat fundalul. Și primul lucru de remarcat aici este diferența dintre culoare de fundalși imagine de fundal... La început merge culoare de fundal, care umple tot spațiul disponibil al paginii sau al elementului acesteia. Suprapus peste ea este o repetare imagine de fundal... Vizual, acest lucru poate fi reprezentat după cum urmează:

Fundalul unui document HTML și elementele acestuia

Al doilea lucru pe care trebuie să-l știi este diferența dintre documentul corpuluiși element de document. Corpul documentului notat în codul HTML al paginii web prin eticheta BODY, care include întregul conținut al paginii web. Evident, fundalul corpului documentului nu poate fi transparent. Dacă fundalul corpului documentului nu este specificat, se utilizează valoarea implicită setată în setările browserului.

Elementele paginii sunt în interiorul etichetei BODY. Este de remarcat faptul că nu este posibil să setați o culoare și/sau o imagine de fundal folosind HTML pentru toate elementele documentului. De exemplu, o imagine de fundal poate fi specificată numai pentru tabele. În mod implicit, acestea au de obicei un fundal transparent.

Atributul Bgcolor pentru a crea culoarea de fundal

A întreba culoare de fundal documentul sau elementele sale folosesc atributul bgcolor, de exemplu:

În acest caz, setăm culoarea de fundal pentru întreaga pagină. Și iată un exemplu despre cum să setați culoarea de fundal pentru un tabel, în eticheta TABLE:

Este de remarcat faptul că culoarea de fundal din tabel poate fi specificată pentru ambele rânduri din eticheta TR și pentru celulele acestora din eticheta TD.

Cum aflu codul de culoare?

Probabil ați observat deja că culoarea în HTML este setată la o culoare specială. cod, de exemplu: # ec008c. Pentru a afla codul culorii de care ai nevoie, poti folosi unul dintre editorii grafici. De exemplu, în Photoshop puteți folosi „ Instrument cu pipetă»(Pipetă) pentru a obține culoarea dintr-un punct din imagine. Apoi, trebuie să faceți clic pe culoarea rezultată pe bara de instrumente și în fereastra deschisă " Selector de culoare»(Selectarea culorii) copiați codul de culoare.

Vă atrag atenția că acest cod va fi fără semnul lire sterline (#) la început, acest semn va trebui adăugat manual.

De asemenea, puteți utiliza numeroase servicii online, de exemplu:

• etc.

Principiul lor de funcționare este și mai simplu - dați clic pe culoarea dorită și obțineți codul acesteia.

Atribut de fundal pentru a crea o imagine de fundal

Ca și în cazul culorii de fundal și în cazul imagine de fundal Trebuie să utilizați un atribut special, și anume fundal, de exemplu:

În acest caz, setăm imaginea de fundal pentru întreaga pagină. Este de remarcat faptul că, din cauza limitării dimensiunii imaginii, se va repeta, de exemplu:

După cum puteți vedea, la repetare, tranziția dintre imagini este vizibilă. Prin urmare, sunt adesea folosite imagini speciale, unde acest moment este luat în considerare.

Și iată un exemplu despre cum să setați imaginea de fundal pentru un tabel, în eticheta TABLE:

Este de remarcat faptul că imaginea de fundal poate fi setată numai pentru tabel ca întreg și/sau pentru celula sa individuală. Acest lucru nu va funcționa pentru un șir.

Calea absolută și relativă către imaginea de fundal

Merită să i se acorde o atenție deosebită adresa imaginii de fundal... În acest caz, se utilizează calea relativă către imagine, adică adresa este specificată în raport cu locația fișierului imagine în fișierul paginii web. Această opțiune nu poate fi numită deosebit de reușită. Cel mai bine este să folosiți o cale absolută către imagine, de exemplu. URL-ul său complet, De exemplu:

În acest caz, nu veți avea probleme însoțitoare. Puteți citi mai multe despre asta.

Să rezumam

Utilizarea atributelor bgcolor și background este învechită, așa că trebuie să utilizați DOCTYPE tranzitoriu pentru ca codul HTML să fie valid. Pentru a seta culoarea de fundal în HTML, folosește coduri speciale pe care le poți afla într-un editor grafic sau folosind servicii online speciale. Imaginea de fundal este duplicată pe culoarele zonei alocate acesteia și se suprapune cu culoarea de fundal. Este mai bine să utilizați adresa URL completă pentru a specifica imaginea de fundal. Asta e tot pentru mine. Vă mulțumim pentru atenție. Noroc!

Dacă trebuie să aranjați un document într-un editor de text Microsoft Word nu numai corect, ci și frumos, atunci este mai bine să utilizați un fel de imagine în fundal. Puteți lua oricare, dar este mai bine să se potrivească cu textul tipărit. Poate fi, de asemenea, un logo sau un nume de companie. Punerea lor în spatele textului îl face să arate mai frumos decât un filigran sau un fundal și atrage mai multă atenție.

În acest articol ne vom uita la acest subiect și vom învăța cum să facem o imagine ca fundal în MS Word.

Adăugați o imagine prin elementul de meniu corespunzător

Puteți selecta o imagine pentru o pagină în Word 2007, 2010 și 2013, după cum urmează. Deschideți documentul dorit și accesați fila "Aranjament în pagină"... Apoi faceți clic pe butonul „Culoarea paginii” și selectați din meniu.

Dacă aveți Word 2016 instalat, atunci într-un document deschis accesați fila „Design”, apoi faceți totul așa cum este descris mai sus: Culoarea paginii - Metode de umplere.

Se va deschide o mică casetă de dialog. În ea, accesați fila „Imagine” și faceți clic pe butonul cu același nume, care se află sub zona goală din mijloc.

În Word 2016, aceasta va apărea în fața ferestrei afișate în captura de ecran de mai sus. În ea, puteți alege unde doriți să inserați poza, poate fi o imagine de pe computer sau o găsiți pe cea de care aveți nevoie prin căutare.

După ce ați ales o imagine, faceți clic pe „OK” în fereastra corespunzătoare.

Avantajul acestei metode este că fundalul pe care îl alegeți este aplicat tuturor paginilor din document.

Iar minusul este că imaginea trebuie să aibă o dimensiune adecvată. După cum puteți vedea în exemplu, doar un pinguin este vizibil. În consecință, trebuie să salvez această imagine cu o dimensiune diferită printr-un editor, de exemplu, Paint.

Făcând din imagine fundalul paginii

Să ne uităm la un alt mod prin care puteți face imaginea dorită ca fundal.

Deschideți documentul și accesați fila. Apoi faceți clic pe butonul Imagine pentru ao adăuga pe pagină.

În fereastra următoare, găsiți ceea ce se potrivește pe computer, selectați-l și faceți clic pe „Lipiți”.

După ce imaginea este adăugată, faceți clic dreapta pe ea și selectați din meniul contextual Wrap text - În spatele textului.

Acum tot textul care se află în document va fi afișat în fața imaginii. Pentru a face din imaginea selectată fundalul întregii foi și pentru a elimina marginile albe, trebuie să o întindeți. Pentru a face acest lucru, dați clic pe imagine. La margini vor apărea imediat markere - puncte la colțuri și câte un punct pe fiecare parte. Folosind aceste markere, întindeți cadrul în lățime și înălțime, astfel încât să acopere întreaga foaie.

Așa a ieșit la mine. Avantajul metodei este că puteți alege în mod independent ce parte a imaginii va fi afișată pe foaie: în întregime, sau o puteți întinde și face astfel încât să fie afișată doar o anumită zonă.

Dar dacă aveți nevoie de o singură imagine pentru a fi folosită și există multe pagini în document, atunci este mai bine să alegeți o dimensiune potrivită pentru aceasta și să o faceți pe fundal, așa cum este descris în primul paragraf.

Documentele tale vor arăta mai interesante după ce vei pune o imagine potrivită ca fundal al paginilor. Nu uitați că textul nu trebuie pierdut pe fundalul selectat și ar trebui să se potrivească cu textul.